comic-plus/lib/components/popper/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");
require("../style/popper.css");
const config = require("../../../utils/config.js");
require("@vueuse/core");
const main_props = require("./main.props.js");
const vue$1 = require("@floating-ui/vue");
const _hoisted_1 = ["data-placement"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuPopper"
  },
  __name: "main",
  props: main_props.popperProps,
  setup(__props) {
    const props = __props;
    const zIndex = vue.ref(0);
    const arrowRef = vue.ref(null);
    const popperRef = vue.ref(null);
    const triggerRef = vue.computed(() => {
      return props.trigger;
    });
    var cleanup;
    const middleware = vue.computed(() => {
      return [vue$1.offset(props.offset), vue$1.flip(), vue$1.shift({ padding: 10 }), vue$1.arrow({ element: arrowRef, padding: 10 })];
    });
    const { floatingStyles, middlewareData, placement, update } = vue$1.useFloating(triggerRef, popperRef, {
      placement: props.placement,
      middleware
    });
    vue.watch(
      () => props.show,
      (val, old) => {
        if (val && val !== old) {
          zIndex.value = config.getNextZIndex();
        }
        if (val) {
          if (triggerRef.value && popperRef.value) {
            cleanup = vue$1.autoUpdate(triggerRef.value, popperRef.value, update);
          }
        } else {
          cleanup();
        }
      }
    );
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
        vue.createElementVNode("div", {
          class: "cu-popper-warpper",
          ref_key: "popperRef",
          ref: popperRef,
          style: vue.normalizeStyle({ ...vue.unref(floatingStyles), zIndex: zIndex.value })
        }, [
          vue.createVNode(vue.Transition, {
            name: _ctx.transitionName,
            onAfterLeave: _cache[0] || (_cache[0] = () => zIndex.value = 0)
          }, {
            default: vue.withCtx(() => {
              var _a, _b;
              return [
                vue.withDirectives(vue.createElementVNode("div", {
                  class: vue.normalizeClass(["cu-popper", [_ctx.effect, _ctx.customClass]]),
                  "data-placement": vue.unref(placement)
                }, [
                  !_ctx.hideArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                    key: 0,
                    class: "cu-popper__arrow",
                    ref_key: "arrowRef",
                    ref: arrowRef,
                    style: vue.normalizeStyle({
                      left: _ctx.arrowLeft ? "20px" : ((_a = vue.unref(middlewareData).arrow) == null ? void 0 : _a.x) != null ? `${vue.unref(middlewareData).arrow.x}px` : "",
                      top: ((_b = vue.unref(middlewareData).arrow) == null ? void 0 : _b.y) != null ? `${vue.unref(middlewareData).arrow.y}px` : ""
                    })
                  }, null, 4)) : vue.createCommentVNode("", true),
                  vue.renderSlot(_ctx.$slots, "default")
                ], 10, _hoisted_1), [
                  [vue.vShow, _ctx.show]
                ])
              ];
            }),
            _: 3
          }, 8, ["name"])
        ], 4)
      ]);
    };
  }
});
exports.default = _sfc_main;