comic-plus/lib/components/contextmenu/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/contextmenu.css");
const index = require("../../only-child/index.js");
const config = require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
const core = require("@vueuse/core");
const main_props = require("./main.props.js");
const vue$1 = require("@floating-ui/vue");
const _hoisted_1 = { class: "cu-contextmenu-list" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = {
  key: 0,
  class: "cu-contextmenu-list__icon"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuContextmenu"
  },
  __name: "main",
  props: main_props.contextmenuProps,
  emits: main_props.contextmenuEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const zIndex = vue.ref(0);
    const triggerRef = vue.ref();
    const virtualEl = vue.ref();
    const popperRef = vue.ref();
    const showMenus = vue.ref(false);
    const { floatingStyles } = vue$1.useFloating(virtualEl, popperRef, {
      placement: "bottom-start",
      middleware: [vue$1.flip(), vue$1.shift({ padding: 10 })]
    });
    const menuList = vue.computed(() => {
      var _a;
      return (_a = props.menus) == null ? void 0 : _a.map((v) => {
        return typescript.isObject(v) ? v : { label: v, value: v };
      });
    });
    const hasIcon = vue.computed(() => {
      return menuList.value.some((v) => v.icon && typescript.isVueComponent(v.icon));
    });
    function createVirtualEl({ clientX, clientY }) {
      virtualEl.value = {
        getBoundingClientRect() {
          return {
            width: 0,
            height: 0,
            x: clientX,
            y: clientY,
            top: clientY,
            left: clientX,
            right: clientX,
            bottom: clientY
          };
        }
      };
    }
    function contextmenu(e) {
      e.stopPropagation();
      e.preventDefault();
      virtualEl.value = null;
      vue.nextTick(() => {
        createVirtualEl(e);
      });
      zIndex.value = config.getNextZIndex();
      showMenus.value = true;
    }
    function closeMenus() {
      showMenus.value = false;
    }
    function menuClick(menu) {
      if (typescript.isFunction(menu.callback)) {
        menu.callback();
        return;
      }
      emit("menu-click", menu.value);
    }
    core.useEventListener(triggerRef, "contextmenu", contextmenu);
    core.useEventListener(window, "click", closeMenus, true);
    core.useEventListener(window, "contextmenu", closeMenus, true);
    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.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
          vue.createVNode(vue.Transition, { name: "cu-fade" }, {
            default: vue.withCtx(() => [
              vue.withDirectives(vue.createElementVNode("div", {
                class: "cu-contextmenus",
                ref_key: "popperRef",
                ref: popperRef,
                style: vue.normalizeStyle({ ...vue.unref(floatingStyles), zIndex: zIndex.value }),
                onContextmenu: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                }, ["stop", "prevent"]))
              }, [
                vue.renderSlot(_ctx.$slots, "menus", {}, () => [
                  vue.createElementVNode("ul", _hoisted_1, [
                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(menuList.value, (menu) => {
                      return vue.openBlock(), vue.createElementBlock("li", {
                        class: "cu-contextmenu-list__item",
                        onClick: ($event) => menuClick(menu)
                      }, [
                        hasIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
                          vue.unref(typescript.isVueComponent)(menu.icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(menu.icon), { key: 0 })) : vue.createCommentVNode("", true)
                        ])) : vue.createCommentVNode("", true),
                        vue.createElementVNode("span", null, vue.toDisplayString(menu.label ?? menu.value), 1)
                      ], 8, _hoisted_2);
                    }), 256))
                  ])
                ])
              ], 36), [
                [vue.vShow, showMenus.value]
              ])
            ]),
            _: 3
          })
        ]))
      ], 64);
    };
  }
});
exports.default = _sfc_main;