import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow } from 'vue';
|
import { isClient, useEventListener } from '@vueuse/core';
|
import '../../../utils/index.mjs';
|
import '../../../hooks/index.mjs';
|
import { scrollbarContextKey } from './constants.mjs';
|
import { BAR_MAP, renderThumbStyle } from './util.mjs';
|
import { thumbProps } from './thumb.mjs';
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
import { throwError } from '../../../utils/error.mjs';
|
|
const COMPONENT_NAME = "Thumb";
|
const _sfc_main = /* @__PURE__ */ 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 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;
|
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];
|
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 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(createElementVNode("div", {
|
ref_key: "instance",
|
ref: instance,
|
class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
|
onMousedown: clickTrackHandler
|
}, [
|
createElementVNode("div", {
|
ref_key: "thumb",
|
ref: thumb,
|
class: normalizeClass(unref(ns).e("thumb")),
|
style: normalizeStyle(unref(thumbStyle)),
|
onMousedown: clickThumbHandler
|
}, null, 38)
|
], 34), [
|
[vShow, _ctx.always || visible.value]
|
])
|
]),
|
_: 1
|
}, 8, ["name"]);
|
};
|
}
|
});
|
var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/thumb.vue"]]);
|
|
export { Thumb as default };
|
//# sourceMappingURL=thumb2.mjs.map
|
