tav-ui/lib/packages/components/scrollbar/src/scrollbar2.js

Tav UI

'use strict';

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

var vue = require('vue');
var index$1 = require('../../../utils/event/index2.js');
var index = require('../../button/index2.js');
var bar = require('./bar2.js');
var types = require('./types2.js');
var util = require('./util2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "TaScrollbar",
  components: { Bar: bar["default"], Button: index.TaButton },
  inheritAttrs: false,
  props: types.scrollbarProps,
  setup(props) {
    const sizeWidth = vue.ref("0");
    const sizeHeight = vue.ref("0");
    const moveX = vue.ref(0);
    const moveY = vue.ref(0);
    const wrap = vue.ref();
    const resize = vue.ref();
    const isBackTopShow = vue.ref(false);
    vue.provide("scroll-bar-wrap", wrap);
    const style = vue.computed(() => {
      if (Array.isArray(props.wrapStyle))
        return util.toObject(props.wrapStyle);
      return props.wrapStyle;
    });
    const handleScroll = () => {
      if (!props.native && wrap.value) {
        moveY.value = wrap.value.scrollTop * 100 / wrap.value.clientHeight;
        moveX.value = wrap.value.scrollLeft * 100 / wrap.value.clientWidth;
        if (props.backTopVisibilityHeight && moveY.value > props.backTopVisibilityHeight) {
          isBackTopShow.value = true;
        } else {
          isBackTopShow.value = false;
        }
      }
    };
    const update = () => {
      if (!wrap.value)
        return;
      const heightPercentage = wrap.value.clientHeight * 100 / wrap.value.scrollHeight;
      const widthPercentage = wrap.value.clientWidth * 100 / wrap.value.scrollWidth;
      sizeHeight.value = heightPercentage < 100 ? `${heightPercentage}%` : "";
      sizeWidth.value = widthPercentage < 100 ? `${widthPercentage}%` : "";
    };
    const handleBackTopClick = () => {
      if (wrap.value)
        wrap.value.scrollTop = 0;
    };
    vue.onMounted(() => {
      if (props.native)
        return;
      vue.nextTick(update);
      vue.inject("modalEmitter")?.on("redoThumbHeight", () => {
        vue.nextTick(update);
      });
      if (!props.noresize) {
        index$1.addResizeListener(vue.unref(resize), update);
        wrap.value && index$1.addResizeListener(wrap.value, update);
        addEventListener("resize", update);
      }
    });
    vue.onBeforeUnmount(() => {
      if (props.native)
        return;
      if (!props.noresize) {
        index$1.removeResizeListener(vue.unref(resize), update);
        wrap.value && index$1.removeResizeListener(wrap.value, update);
        removeEventListener("resize", update);
      }
    });
    return {
      moveX,
      moveY,
      sizeWidth,
      sizeHeight,
      style,
      wrap,
      resize,
      update,
      handleScroll,
      isBackTopShow,
      handleBackTopClick
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Button = vue.resolveComponent("Button");
  const _component_bar = vue.resolveComponent("bar");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass(["scrollbar", _ctx.containerClass])
  }, [
    vue.createElementVNode("div", {
      ref: "wrap",
      class: vue.normalizeClass([_ctx.wrapClass, "scrollbar__wrap", _ctx.native ? "" : "scrollbar__wrap--hidden-default"]),
      style: vue.normalizeStyle(_ctx.style),
      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
    }, [
      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
        ref: "resize",
        class: vue.normalizeClass(["scrollbar__view", _ctx.viewClass]),
        style: vue.normalizeStyle(_ctx.viewStyle)
      }, {
        default: vue.withCtx(() => [
          vue.renderSlot(_ctx.$slots, "default"),
          _ctx.isBackTopShow ? (vue.openBlock(), vue.createBlock(_component_Button, {
            key: 0,
            type: "text",
            "pre-icon": "ant-design:vertical-align-top-outlined",
            "icon-size": 18,
            style: { "min-width": "auto", "position": "absolute", "right": "15px", "bottom": "7px", "width": "30px", "height": "30px !important", "overflow": "hidden", "color": "#fff", "background-color": "#00000073", "border-radius": "50%", "transition": "all 0.3s", "cursor": "pointer", "display": "flex", "justify-content": "center", "align-items": "center" },
            onClick: _ctx.handleBackTopClick
          }, null, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
        ]),
        _: 3
      }, 8, ["class", "style"]))
    ], 38),
    !_ctx.native ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
      vue.createVNode(_component_bar, {
        move: _ctx.moveX,
        size: _ctx.sizeWidth
      }, null, 8, ["move", "size"]),
      vue.createVNode(_component_bar, {
        vertical: "",
        move: _ctx.moveY,
        size: _ctx.sizeHeight
      }, null, 8, ["move", "size"])
    ], 64)) : vue.createCommentVNode("v-if", true)
  ], 2);
}
var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/scrollbar/src/scrollbar.vue"]]);

exports["default"] = Scrollbar;
//# sourceMappingURL=scrollbar2.js.map