comic-plus/es/components/contextmenu/src/main.vue.mjs

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

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