hongluan-ui/es/components/scrollbar/src/scrollbar.mjs

Hongluan Component Library for Vue 3

import { defineComponent, ref, computed, watch, provide, reactive, onActivated, onMounted, nextTick, onUpdated, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
import { useResizeObserver, useEventListener } from '@vueuse/core';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import Bar from './bar2.mjs';
import { scrollbarProps } from './scrollbar2.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { addUnit } from '../../../utils/dom/style.mjs';
import { isObject } from '@vue/shared';
import { isNumber } from '../../../utils/types.mjs';
import { debugWarn } from '../../../utils/error.mjs';
import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const _sfc_main = defineComponent({
  name: "Scrollbar",
  components: {
    Bar
  },
  props: scrollbarProps,
  emits: ["scroll", "at-end"],
  setup(props, { emit }) {
    let stopResizeObserver = void 0;
    let stopResizeListener = void 0;
    let wrapScrollTop = 0;
    let wrapScrollLeft = 0;
    let oldScrollTop = Number.MAX_SAFE_INTEGER;
    const scrollbarRef = ref();
    const wrapRef = ref();
    const resizeRef = ref();
    const barRef = ref();
    const SCOPE = "Scrollbar";
    const style = computed(() => {
      const style2 = {};
      if (props.height)
        style2.height = addUnit(props.height);
      if (props.maxHeight)
        style2.maxHeight = addUnit(props.maxHeight);
      return [props.wrapStyle, style2];
    });
    const handleScroll = () => {
      var _a;
      if (wrapRef.value) {
        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
        wrapScrollTop = wrapRef.value.scrollTop;
        wrapScrollLeft = wrapRef.value.scrollLeft;
        emit("scroll", {
          scrollTop: wrapRef.value.scrollTop,
          scrollLeft: wrapRef.value.scrollLeft
        });
        if (wrapRef.value.scrollTop > oldScrollTop && wrapRef.value.scrollTop + wrapRef.value.offsetHeight + props.distance >= wrapRef.value.scrollHeight) {
          emit("at-end", { vertical: true });
        }
        oldScrollTop = wrapRef.value.scrollTop;
      }
    };
    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(SCOPE, "value must be a number");
        return;
      }
      wrapRef.value.scrollTop = value;
    };
    const setScrollLeft = (value) => {
      if (!isNumber(value)) {
        debugWarn(SCOPE, "value must be a number");
        return;
      }
      wrapRef.value.scrollLeft = value;
    };
    const update = () => {
      var _a;
      (_a = barRef.value) == null ? void 0 : _a.update();
    };
    watch(() => props.noresize, (noresize) => {
      if (noresize) {
        stopResizeObserver == null ? void 0 : stopResizeObserver();
        stopResizeListener == null ? void 0 : stopResizeListener();
      } else {
        ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
        stopResizeListener = useEventListener("resize", update);
      }
    }, { immediate: true });
    provide(scrollbarContextKey, reactive({
      scrollbarElement: scrollbarRef,
      wrapElement: wrapRef
    }));
    onActivated(() => {
      wrapRef.value.scrollTop = wrapScrollTop;
      wrapRef.value.scrollLeft = wrapScrollLeft;
    });
    onMounted(() => {
      if (!props.native) {
        nextTick(() => {
          update();
        });
      }
    });
    onUpdated(() => update());
    const { namespace } = useNamespace("scrollbar");
    return {
      namespace,
      scrollbarRef,
      wrapRef,
      resizeRef,
      barRef,
      style,
      update,
      handleScroll,
      setScrollTop,
      setScrollLeft,
      scrollTo
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_bar = resolveComponent("bar");
  return openBlock(), createElementBlock("div", {
    ref: "scrollbarRef",
    class: normalizeClass(_ctx.namespace)
  }, [
    createElementVNode("div", {
      ref: "wrapRef",
      class: normalizeClass([
        _ctx.wrapClass,
        "scrollbar-wrap",
        _ctx.native ? "" : "scrollbar-wrap-hidden"
      ]),
      style: normalizeStyle(_ctx.style),
      onScroll: _ctx.handleScroll
    }, [
      (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
        id: _ctx.id,
        ref: "resizeRef",
        class: normalizeClass(["scrollbar-view", _ctx.viewClass]),
        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, ["onScroll"]),
    !_ctx.native ? (openBlock(), createBlock(_component_bar, {
      key: 0,
      ref: "barRef",
      always: _ctx.always,
      "min-size": _ctx.minSize
    }, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)
  ], 2);
}
var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { Scrollbar as default };
//# sourceMappingURL=scrollbar.mjs.map