'use strict';
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
var vue = require('vue');
|
var core = require('@vueuse/core');
|
require('../../../utils/index.js');
|
require('../../../hooks/index.js');
|
var constants = require('./constants.js');
|
var util = require('./util.js');
|
var thumb = require('./thumb.js');
|
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
var index = require('../../../hooks/use-namespace/index.js');
|
var error = require('../../../utils/error.js');
|
|
const COMPONENT_NAME = "Thumb";
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
__name: "thumb",
|
props: thumb.thumbProps,
|
setup(__props) {
|
const props = __props;
|
const scrollbar = vue.inject(constants.scrollbarContextKey);
|
const ns = index.useNamespace("scrollbar");
|
if (!scrollbar)
|
error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
|
const instance = vue.ref();
|
const thumb = vue.ref();
|
const thumbState = vue.ref({});
|
const visible = vue.ref(false);
|
let cursorDown = false;
|
let cursorLeave = false;
|
let originalOnSelectStart = core.isClient ? document.onselectstart : null;
|
const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
|
const thumbStyle = vue.computed(() => util.renderThumbStyle({
|
size: props.size,
|
move: props.move,
|
bar: bar.value
|
}));
|
const offsetRatio = vue.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;
|
};
|
vue.onBeforeUnmount(() => {
|
restoreOnselectstart();
|
document.removeEventListener("mouseup", mouseUpDocumentHandler);
|
});
|
const restoreOnselectstart = () => {
|
if (document.onselectstart !== originalOnSelectStart)
|
document.onselectstart = originalOnSelectStart;
|
};
|
core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
|
core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
|
return (_ctx, _cache) => {
|
return vue.openBlock(), vue.createBlock(vue.Transition, {
|
name: vue.unref(ns).b("fade"),
|
persisted: ""
|
}, {
|
default: vue.withCtx(() => [
|
vue.withDirectives(vue.createElementVNode("div", {
|
ref_key: "instance",
|
ref: instance,
|
class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
|
onMousedown: clickTrackHandler
|
}, [
|
vue.createElementVNode("div", {
|
ref_key: "thumb",
|
ref: thumb,
|
class: vue.normalizeClass(vue.unref(ns).e("thumb")),
|
style: vue.normalizeStyle(vue.unref(thumbStyle)),
|
onMousedown: clickThumbHandler
|
}, null, 38)
|
], 34), [
|
[vue.vShow, _ctx.always || visible.value]
|
])
|
]),
|
_: 1
|
}, 8, ["name"]);
|
};
|
}
|
});
|
var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/scrollbar/src/thumb.vue"]]);
|
|
exports["default"] = Thumb;
|
//# sourceMappingURL=thumb2.js.map
|
