hongluan-ui/lib/components/scrollbar/src/thumb2.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../tokens/index.js');
require('../../../utils/index.js');
var util = require('./util.js');
var thumb = require('./thumb.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var scrollbar = require('../../../tokens/scrollbar.js');
var error = require('../../../utils/error.js');

const COMPONENT_NAME = "Thumb";
const _sfc_main = vue.defineComponent({
  name: COMPONENT_NAME,
  props: thumb.scrollbarThumbProps,
  setup(props) {
    const scrollbar$1 = vue.inject(scrollbar.scrollbarContextKey);
    if (!scrollbar$1)
      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$1.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$1.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.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;
    };
    const scrollHorizontally = (e) => {
      if (!props.vertical && visible.value && scrollbar$1.scrollbarElement.querySelector(".is-vertical").style.display) {
        const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
        scrollbar$1.wrapElement.scrollLeft -= delta * 28;
        e.preventDefault();
      }
    };
    vue.onBeforeUnmount(() => {
      restoreOnselectstart();
      document.removeEventListener("mouseup", mouseUpDocumentHandler);
    });
    const restoreOnselectstart = () => {
      if (document.onselectstart !== originalOnSelectStart)
        document.onselectstart = originalOnSelectStart;
    };
    core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
    core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
    !props.vertical && core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mousewheel", scrollHorizontally);
    return {
      instance,
      thumb,
      bar,
      thumbStyle,
      visible,
      clickTrackHandler,
      clickThumbHandler
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "fade" }, {
    default: vue.withCtx(() => [
      vue.withDirectives(vue.createElementVNode("div", {
        ref: "instance",
        class: vue.normalizeClass(["scrollbar-bar", "is-" + _ctx.bar.key]),
        onMousedown: _ctx.clickTrackHandler
      }, [
        vue.createElementVNode("div", {
          ref: "thumb",
          class: "scrollbar-thumb",
          style: vue.normalizeStyle(_ctx.thumbStyle),
          onMousedown: _ctx.clickThumbHandler
        }, null, 44, ["onMousedown"])
      ], 42, ["onMousedown"]), [
        [vue.vShow, _ctx.always || _ctx.visible]
      ])
    ]),
    _: 1
  });
}
var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = Thumb;
//# sourceMappingURL=thumb2.js.map