comic-plus/lib/components/backtop/src/main.vue.js

<p align="center"> <img width="200px" src="./logo.png"/> </p>

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const core = require("@vueuse/core");
require("../style/backtop.css");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = { class: "cu-backtop__container" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuBacktop"
  },
  __name: "main",
  props: main_props.backtopProps,
  setup(__props) {
    const props = __props;
    const targetDom = vue.ref(null);
    const show = vue.ref(false);
    const zIndex = config.getNextZIndex();
    const style = vue.computed(() => {
      return {
        "--cu-backtop-size": typescript.isNumber(props.size) ? props.size + "px" : props.size,
        zIndex,
        right: typescript.isNumber(props.right) ? props.right + "px" : props.right,
        bottom: typescript.isNumber(props.bottom) ? props.bottom + "px" : props.bottom
      };
    });
    function backTop() {
      let el = targetDom.value === document ? document.documentElement : targetDom.value;
      el.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }
    function onScroll(e) {
      var _a, _b;
      let top = e.target.scrollTop || ((_b = (_a = e.target) == null ? void 0 : _a.scrollingElement) == null ? void 0 : _b.scrollTop);
      show.value = top >= props.visibleHeight;
    }
    core.useEventListener(targetDom, "scroll", onScroll);
    vue.onMounted(() => {
      targetDom.value = document;
      if (props.target) {
        targetDom.value = document.querySelector(props.target);
        if (!targetDom.value) {
          vue.warn(`Unable to find element bound to ${props.target}`);
        }
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
        vue.createVNode(vue.Transition, { name: "cu-fade" }, {
          default: vue.withCtx(() => [
            show.value ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              class: "cu-backtop",
              style: vue.normalizeStyle(style.value),
              onClick: backTop
            }, [
              vue.renderSlot(_ctx.$slots, "default", {}, () => [
                vue.createElementVNode("div", _hoisted_1, [
                  vue.createVNode(vue.unref(components.UpFilled))
                ])
              ])
            ], 4)) : vue.createCommentVNode("", true)
          ]),
          _: 3
        })
      ]);
    };
  }
});
exports.default = _sfc_main;