comic-plus/lib/components/menu/src/menu-popper.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 config = require("../../../utils/config.js");
require("@vueuse/core");
const type = require("./type.js");
const vue$1 = require("@floating-ui/vue");
const _hoisted_1 = ["data-placement"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuMenuPopper"
  },
  __name: "menu-popper",
  props: {
    disabled: Boolean,
    fixed: Boolean,
    show: Boolean,
    trigger: HTMLElement
  },
  emits: ["mouse-in", "mouse-out"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const zIndex = vue.ref(0);
    const { props: injectProps } = vue.inject(type.MENU_PROVIDE);
    const popperRef = vue.ref(null);
    const triggerRef = vue.computed(() => props.trigger);
    var cleanup;
    const middleware = vue.computed(() => {
      return [vue$1.offset(10), vue$1.flip(), vue$1.shift({ padding: 10 })];
    });
    const { floatingStyles, placement, update } = vue$1.useFloating(triggerRef, popperRef, {
      placement: injectProps.mode === "vertical" || !props.fixed ? "right-start" : "bottom",
      middleware
    });
    vue.watch(
      () => props.show,
      (val, old) => {
        if (val) {
          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",
        disabled: !__props.fixed
      }, [
        vue.createElementVNode("div", {
          class: "cu-menu-popper-warpper",
          ref_key: "popperRef",
          ref: popperRef,
          style: vue.normalizeStyle({ ...vue.unref(floatingStyles), zIndex: zIndex.value })
        }, [
          vue.createVNode(vue.Transition, {
            name: "cu-menu-popper",
            onAfterLeave: _cache[2] || (_cache[2] = () => zIndex.value = 0)
          }, {
            default: vue.withCtx(() => [
              vue.withDirectives(vue.createElementVNode("div", {
                class: "cu-menu-popper",
                "data-placement": vue.unref(placement),
                onMouseenter: _cache[0] || (_cache[0] = ($event) => emit("mouse-in")),
                onMouseleave: _cache[1] || (_cache[1] = ($event) => emit("mouse-out"))
              }, [
                vue.renderSlot(_ctx.$slots, "default")
              ], 40, _hoisted_1), [
                [vue.vShow, __props.show]
              ])
            ]),
            _: 3
          })
        ], 4)
      ], 8, ["disabled"]);
    };
  }
});
exports.default = _sfc_main;