576 lines
18 KiB
JavaScript
576 lines
18 KiB
JavaScript
import {
|
|
BAR_MAP,
|
|
GAP,
|
|
renderThumbStyle
|
|
} from "./chunk-7F6Y7TML.js";
|
|
import {
|
|
addUnit
|
|
} from "./chunk-3DJYPQW6.js";
|
|
import {
|
|
useAriaProps
|
|
} from "./chunk-6VHTGKN7.js";
|
|
import {
|
|
isClient,
|
|
useEventListener,
|
|
useResizeObserver
|
|
} from "./chunk-FYPMSKES.js";
|
|
import {
|
|
debugWarn,
|
|
isNumber,
|
|
throwError
|
|
} from "./chunk-UFIWN4M6.js";
|
|
import {
|
|
_export_sfc
|
|
} from "./chunk-MUJDDH7P.js";
|
|
import {
|
|
buildProps,
|
|
definePropType,
|
|
useNamespace,
|
|
withInstall
|
|
} from "./chunk-R2OGZABH.js";
|
|
import {
|
|
Fragment,
|
|
Transition,
|
|
computed,
|
|
createBaseVNode,
|
|
createBlock,
|
|
createCommentVNode,
|
|
createElementBlock,
|
|
createVNode,
|
|
defineComponent,
|
|
inject,
|
|
nextTick,
|
|
onActivated,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
onUpdated,
|
|
openBlock,
|
|
provide,
|
|
reactive,
|
|
ref,
|
|
renderSlot,
|
|
resolveDynamicComponent,
|
|
toRef,
|
|
unref,
|
|
vShow,
|
|
watch,
|
|
withCtx,
|
|
withDirectives,
|
|
withModifiers
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import {
|
|
init_shared_esm_bundler,
|
|
isObject,
|
|
normalizeClass,
|
|
normalizeStyle
|
|
} from "./chunk-OWZYVOTZ.js";
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/constants.mjs
|
|
var scrollbarContextKey = Symbol("scrollbarContextKey");
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/thumb.mjs
|
|
var thumbProps = buildProps({
|
|
vertical: Boolean,
|
|
size: String,
|
|
move: Number,
|
|
ratio: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
always: Boolean
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/scrollbar.mjs
|
|
var scrollbarProps = buildProps({
|
|
distance: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
height: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
maxHeight: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
native: Boolean,
|
|
wrapStyle: {
|
|
type: definePropType([String, Object, Array]),
|
|
default: ""
|
|
},
|
|
wrapClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewClass: {
|
|
type: [String, Array],
|
|
default: ""
|
|
},
|
|
viewStyle: {
|
|
type: [String, Array, Object],
|
|
default: ""
|
|
},
|
|
noresize: Boolean,
|
|
tag: {
|
|
type: String,
|
|
default: "div"
|
|
},
|
|
always: Boolean,
|
|
minSize: {
|
|
type: Number,
|
|
default: 20
|
|
},
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: void 0
|
|
},
|
|
id: String,
|
|
role: String,
|
|
...useAriaProps(["ariaLabel", "ariaOrientation"])
|
|
});
|
|
var scrollbarEmits = {
|
|
"end-reached": (direction) => ["left", "right", "top", "bottom"].includes(direction),
|
|
scroll: ({
|
|
scrollTop,
|
|
scrollLeft
|
|
}) => [scrollTop, scrollLeft].every(isNumber)
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/thumb2.mjs
|
|
var COMPONENT_NAME = "Thumb";
|
|
var _sfc_main = defineComponent({
|
|
__name: "thumb",
|
|
props: thumbProps,
|
|
setup(__props) {
|
|
const props = __props;
|
|
const scrollbar = inject(scrollbarContextKey);
|
|
const ns = useNamespace("scrollbar");
|
|
if (!scrollbar)
|
|
throwError(COMPONENT_NAME, "can not inject scrollbar context");
|
|
const instance = ref();
|
|
const thumb = ref();
|
|
const thumbState = ref({});
|
|
const visible = ref(false);
|
|
let cursorDown = false;
|
|
let cursorLeave = false;
|
|
let baseScrollHeight = 0;
|
|
let baseScrollWidth = 0;
|
|
let originalOnSelectStart = isClient ? document.onselectstart : null;
|
|
const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
|
|
const thumbStyle = computed(() => renderThumbStyle({
|
|
size: props.size,
|
|
move: props.move,
|
|
bar: bar.value
|
|
}));
|
|
const offsetRatio = computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
|
|
const clickThumbHandler = (e) => {
|
|
var _a;
|
|
e.stopPropagation();
|
|
if (e.ctrlKey || [1, 2].includes(e.button))
|
|
return;
|
|
(_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
|
|
startDrag(e);
|
|
const el = e.currentTarget;
|
|
if (!el)
|
|
return;
|
|
thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
|
|
};
|
|
const clickTrackHandler = (e) => {
|
|
if (!thumb.value || !instance.value || !scrollbar.wrapElement)
|
|
return;
|
|
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
|
|
const thumbHalf = thumb.value[bar.value.offset] / 2;
|
|
const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
|
|
};
|
|
const startDrag = (e) => {
|
|
e.stopImmediatePropagation();
|
|
cursorDown = true;
|
|
baseScrollHeight = scrollbar.wrapElement.scrollHeight;
|
|
baseScrollWidth = scrollbar.wrapElement.scrollWidth;
|
|
document.addEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.addEventListener("mouseup", mouseUpDocumentHandler);
|
|
originalOnSelectStart = document.onselectstart;
|
|
document.onselectstart = () => false;
|
|
};
|
|
const mouseMoveDocumentHandler = (e) => {
|
|
if (!instance.value || !thumb.value)
|
|
return;
|
|
if (cursorDown === false)
|
|
return;
|
|
const prevPage = thumbState.value[bar.value.axis];
|
|
if (!prevPage)
|
|
return;
|
|
const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
|
|
const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
|
|
const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
|
|
if (bar.value.scroll === "scrollLeft") {
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
|
|
} else {
|
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
|
|
}
|
|
};
|
|
const mouseUpDocumentHandler = () => {
|
|
cursorDown = false;
|
|
thumbState.value[bar.value.axis] = 0;
|
|
document.removeEventListener("mousemove", mouseMoveDocumentHandler);
|
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
|
restoreOnselectstart();
|
|
if (cursorLeave)
|
|
visible.value = false;
|
|
};
|
|
const mouseMoveScrollbarHandler = () => {
|
|
cursorLeave = false;
|
|
visible.value = !!props.size;
|
|
};
|
|
const mouseLeaveScrollbarHandler = () => {
|
|
cursorLeave = true;
|
|
visible.value = cursorDown;
|
|
};
|
|
onBeforeUnmount(() => {
|
|
restoreOnselectstart();
|
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
|
});
|
|
const restoreOnselectstart = () => {
|
|
if (document.onselectstart !== originalOnSelectStart)
|
|
document.onselectstart = originalOnSelectStart;
|
|
};
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
|
|
useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(Transition, {
|
|
name: unref(ns).b("fade"),
|
|
persisted: ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
withDirectives(createBaseVNode("div", {
|
|
ref_key: "instance",
|
|
ref: instance,
|
|
class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
|
|
onMousedown: clickTrackHandler,
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
createBaseVNode("div", {
|
|
ref_key: "thumb",
|
|
ref: thumb,
|
|
class: normalizeClass(unref(ns).e("thumb")),
|
|
style: normalizeStyle(unref(thumbStyle)),
|
|
onMousedown: clickThumbHandler
|
|
}, null, 38)
|
|
], 42, ["onClick"]), [
|
|
[vShow, _ctx.always || visible.value]
|
|
])
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]);
|
|
};
|
|
}
|
|
});
|
|
var Thumb = _export_sfc(_sfc_main, [["__file", "thumb.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/bar.mjs
|
|
var barProps = buildProps({
|
|
always: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
minSize: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/bar2.mjs
|
|
var _sfc_main2 = defineComponent({
|
|
__name: "bar",
|
|
props: barProps,
|
|
setup(__props, { expose }) {
|
|
const props = __props;
|
|
const scrollbar = inject(scrollbarContextKey);
|
|
const moveX = ref(0);
|
|
const moveY = ref(0);
|
|
const sizeWidth = ref("");
|
|
const sizeHeight = ref("");
|
|
const ratioY = ref(1);
|
|
const ratioX = ref(1);
|
|
const handleScroll = (wrap) => {
|
|
if (wrap) {
|
|
const offsetHeight = wrap.offsetHeight - GAP;
|
|
const offsetWidth = wrap.offsetWidth - GAP;
|
|
moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
|
|
moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
|
|
}
|
|
};
|
|
const update = () => {
|
|
const wrap = scrollbar == null ? void 0 : scrollbar.wrapElement;
|
|
if (!wrap)
|
|
return;
|
|
const offsetHeight = wrap.offsetHeight - GAP;
|
|
const offsetWidth = wrap.offsetWidth - GAP;
|
|
const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
|
|
const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
|
|
const height = Math.max(originalHeight, props.minSize);
|
|
const width = Math.max(originalWidth, props.minSize);
|
|
ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
|
|
ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
|
|
sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
|
|
sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
|
|
};
|
|
expose({
|
|
handleScroll,
|
|
update
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
createVNode(Thumb, {
|
|
move: moveX.value,
|
|
ratio: ratioX.value,
|
|
size: sizeWidth.value,
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"]),
|
|
createVNode(Thumb, {
|
|
move: moveY.value,
|
|
ratio: ratioY.value,
|
|
size: sizeHeight.value,
|
|
vertical: "",
|
|
always: _ctx.always
|
|
}, null, 8, ["move", "ratio", "size", "always"])
|
|
], 64);
|
|
};
|
|
}
|
|
});
|
|
var Bar = _export_sfc(_sfc_main2, [["__file", "bar.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/src/scrollbar2.mjs
|
|
init_shared_esm_bundler();
|
|
var COMPONENT_NAME2 = "ElScrollbar";
|
|
var __default__ = defineComponent({
|
|
name: COMPONENT_NAME2
|
|
});
|
|
var _sfc_main3 = defineComponent({
|
|
...__default__,
|
|
props: scrollbarProps,
|
|
emits: scrollbarEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const ns = useNamespace("scrollbar");
|
|
let stopResizeObserver = void 0;
|
|
let stopWrapResizeObserver = void 0;
|
|
let stopResizeListener = void 0;
|
|
let wrapScrollTop = 0;
|
|
let wrapScrollLeft = 0;
|
|
let direction = "";
|
|
const distanceScrollState = {
|
|
bottom: false,
|
|
top: false,
|
|
right: false,
|
|
left: false
|
|
};
|
|
const scrollbarRef = ref();
|
|
const wrapRef = ref();
|
|
const resizeRef = ref();
|
|
const barRef = ref();
|
|
const wrapStyle = computed(() => {
|
|
const style = {};
|
|
if (props.height)
|
|
style.height = addUnit(props.height);
|
|
if (props.maxHeight)
|
|
style.maxHeight = addUnit(props.maxHeight);
|
|
return [props.wrapStyle, style];
|
|
});
|
|
const wrapKls = computed(() => {
|
|
return [
|
|
props.wrapClass,
|
|
ns.e("wrap"),
|
|
{ [ns.em("wrap", "hidden-default")]: !props.native }
|
|
];
|
|
});
|
|
const resizeKls = computed(() => {
|
|
return [ns.e("view"), props.viewClass];
|
|
});
|
|
const shouldSkipDirection = (direction2) => {
|
|
var _a;
|
|
return (_a = distanceScrollState[direction2]) != null ? _a : false;
|
|
};
|
|
const DIRECTION_PAIRS = {
|
|
top: "bottom",
|
|
bottom: "top",
|
|
left: "right",
|
|
right: "left"
|
|
};
|
|
const updateTriggerStatus = (arrivedStates) => {
|
|
const oppositeDirection = DIRECTION_PAIRS[direction];
|
|
if (!oppositeDirection)
|
|
return;
|
|
const arrived = arrivedStates[direction];
|
|
const oppositeArrived = arrivedStates[oppositeDirection];
|
|
if (arrived && !distanceScrollState[direction]) {
|
|
distanceScrollState[direction] = true;
|
|
}
|
|
if (!oppositeArrived && distanceScrollState[oppositeDirection]) {
|
|
distanceScrollState[oppositeDirection] = false;
|
|
}
|
|
};
|
|
const handleScroll = () => {
|
|
var _a;
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
const prevTop = wrapScrollTop;
|
|
const prevLeft = wrapScrollLeft;
|
|
wrapScrollTop = wrapRef.value.scrollTop;
|
|
wrapScrollLeft = wrapRef.value.scrollLeft;
|
|
const arrivedStates = {
|
|
bottom: wrapScrollTop + wrapRef.value.clientHeight >= wrapRef.value.scrollHeight - props.distance,
|
|
top: wrapScrollTop <= props.distance && prevTop !== 0,
|
|
right: wrapScrollLeft + wrapRef.value.clientWidth >= wrapRef.value.scrollWidth - props.distance && prevLeft !== wrapScrollLeft,
|
|
left: wrapScrollLeft <= props.distance && prevLeft !== 0
|
|
};
|
|
emit("scroll", {
|
|
scrollTop: wrapScrollTop,
|
|
scrollLeft: wrapScrollLeft
|
|
});
|
|
if (prevTop !== wrapScrollTop) {
|
|
direction = wrapScrollTop > prevTop ? "bottom" : "top";
|
|
}
|
|
if (prevLeft !== wrapScrollLeft) {
|
|
direction = wrapScrollLeft > prevLeft ? "right" : "left";
|
|
}
|
|
if (props.distance > 0) {
|
|
if (shouldSkipDirection(direction)) {
|
|
return;
|
|
}
|
|
updateTriggerStatus(arrivedStates);
|
|
}
|
|
if (arrivedStates[direction])
|
|
emit("end-reached", direction);
|
|
}
|
|
};
|
|
function scrollTo(arg1, arg2) {
|
|
if (isObject(arg1)) {
|
|
wrapRef.value.scrollTo(arg1);
|
|
} else if (isNumber(arg1) && isNumber(arg2)) {
|
|
wrapRef.value.scrollTo(arg1, arg2);
|
|
}
|
|
}
|
|
const setScrollTop = (value) => {
|
|
if (!isNumber(value)) {
|
|
debugWarn(COMPONENT_NAME2, "value must be a number");
|
|
return;
|
|
}
|
|
wrapRef.value.scrollTop = value;
|
|
};
|
|
const setScrollLeft = (value) => {
|
|
if (!isNumber(value)) {
|
|
debugWarn(COMPONENT_NAME2, "value must be a number");
|
|
return;
|
|
}
|
|
wrapRef.value.scrollLeft = value;
|
|
};
|
|
const update = () => {
|
|
var _a;
|
|
(_a = barRef.value) == null ? void 0 : _a.update();
|
|
distanceScrollState[direction] = false;
|
|
};
|
|
watch(() => props.noresize, (noresize) => {
|
|
if (noresize) {
|
|
stopResizeObserver == null ? void 0 : stopResizeObserver();
|
|
stopWrapResizeObserver == null ? void 0 : stopWrapResizeObserver();
|
|
stopResizeListener == null ? void 0 : stopResizeListener();
|
|
} else {
|
|
({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
|
|
({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update));
|
|
stopResizeListener = useEventListener("resize", update);
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => [props.maxHeight, props.height], () => {
|
|
if (!props.native)
|
|
nextTick(() => {
|
|
var _a;
|
|
update();
|
|
if (wrapRef.value) {
|
|
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
|
|
}
|
|
});
|
|
});
|
|
provide(scrollbarContextKey, reactive({
|
|
scrollbarElement: scrollbarRef,
|
|
wrapElement: wrapRef
|
|
}));
|
|
onActivated(() => {
|
|
if (wrapRef.value) {
|
|
wrapRef.value.scrollTop = wrapScrollTop;
|
|
wrapRef.value.scrollLeft = wrapScrollLeft;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
if (!props.native)
|
|
nextTick(() => {
|
|
update();
|
|
});
|
|
});
|
|
onUpdated(() => update());
|
|
expose({
|
|
wrapRef,
|
|
update,
|
|
scrollTo,
|
|
setScrollTop,
|
|
setScrollLeft,
|
|
handleScroll
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
ref_key: "scrollbarRef",
|
|
ref: scrollbarRef,
|
|
class: normalizeClass(unref(ns).b())
|
|
}, [
|
|
createBaseVNode("div", {
|
|
ref_key: "wrapRef",
|
|
ref: wrapRef,
|
|
class: normalizeClass(unref(wrapKls)),
|
|
style: normalizeStyle(unref(wrapStyle)),
|
|
tabindex: _ctx.tabindex,
|
|
onScroll: handleScroll
|
|
}, [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
|
|
id: _ctx.id,
|
|
ref_key: "resizeRef",
|
|
ref: resizeRef,
|
|
class: normalizeClass(unref(resizeKls)),
|
|
style: normalizeStyle(_ctx.viewStyle),
|
|
role: _ctx.role,
|
|
"aria-label": _ctx.ariaLabel,
|
|
"aria-orientation": _ctx.ariaOrientation
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
|
|
], 46, ["tabindex"]),
|
|
!_ctx.native ? (openBlock(), createBlock(Bar, {
|
|
key: 0,
|
|
ref_key: "barRef",
|
|
ref: barRef,
|
|
always: _ctx.always,
|
|
"min-size": _ctx.minSize
|
|
}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
var Scrollbar = _export_sfc(_sfc_main3, [["__file", "scrollbar.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/scrollbar/index.mjs
|
|
var ElScrollbar = withInstall(Scrollbar);
|
|
|
|
export {
|
|
scrollbarContextKey,
|
|
thumbProps,
|
|
scrollbarProps,
|
|
scrollbarEmits,
|
|
ElScrollbar
|
|
};
|
|
//# sourceMappingURL=chunk-SY5SN5AU.js.map
|