comic-plus/lib/components/popover/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/popover.css");
const core = require("@vueuse/core");
const index = require("../../only-child/index.js");
const index$1 = require("../../popper/index.js");
require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
const main_props = require("./main.props.js");
const _hoisted_1 = {
  key: 0,
  class: "cu-popover__title"
};
const _hoisted_2 = {
  key: 1,
  class: "cu-popover__content"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuPopover"
  },
  __name: "main",
  props: main_props.popoverProps,
  setup(__props) {
    var _a;
    const props = __props;
    const popperRef = vue.ref();
    const triggerRef = vue.ref();
    const containerStyle = vue.computed(() => {
      return {
        width: props.width + "px"
      };
    });
    const hoverProper = core.useElementHover(popperRef, {
      delayLeave: 300
    });
    const triggerFn = {
      hover: () => {
        return core.useElementHover(triggerRef, {
          delayLeave: 300
        });
      },
      click: () => {
        const clicks = vue.ref(false);
        core.useEventListener(triggerRef, "click", () => {
          clicks.value = !isShow.value;
        });
        return clicks;
      },
      contextmenu: () => {
        const clicks = vue.ref(false);
        core.useEventListener(triggerRef, "contextmenu", (e) => {
          e.preventDefault();
          clicks.value = !isShow.value;
        });
        return clicks;
      }
    };
    const isShow = typescript.isBoolean(props.visible) ? void 0 : (_a = triggerFn[props.trigger]) == null ? void 0 : _a.call(triggerFn);
    if (props.trigger === "click" || props.trigger === "contextmenu") {
      core.onClickOutside(
        popperRef,
        () => {
          isShow.value && (isShow.value = false);
        },
        {
          ignore: [triggerRef]
        }
      );
    }
    const show = vue.computed(() => {
      if (typescript.isBoolean(props.visible)) return props.visible;
      if (props.trigger === "hover") {
        return isShow.value || hoverProper.value;
      }
      return isShow.value;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
        vue.createVNode(vue.unref(index.default), {
          ref_key: "triggerRef",
          ref: triggerRef
        }, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        }, 512),
        vue.createVNode(vue.unref(index$1.CuPopper), {
          show: show.value,
          effect: _ctx.effect,
          offset: _ctx.offset,
          "custom-class": _ctx.popperClass,
          trigger: triggerRef.value,
          placement: _ctx.placement,
          "transition-name": "cu-fade"
        }, {
          default: vue.withCtx(() => [
            vue.createElementVNode("div", {
              class: "cu-popover__container",
              style: vue.normalizeStyle(containerStyle.value),
              ref_key: "popperRef",
              ref: popperRef
            }, [
              vue.renderSlot(_ctx.$slots, "content", {}, () => [
                _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
                _ctx.content ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(_ctx.content), 1)) : vue.createCommentVNode("", true)
              ])
            ], 4)
          ]),
          _: 3
        }, 8, ["show", "effect", "offset", "custom-class", "trigger", "placement"])
      ], 64);
    };
  }
});
exports.default = _sfc_main;