vue-shiki-monaco/dist/es/ContextMenu/index.js

一个封shiki和monaco-editor的Vue组件

import { defineComponent, computed, createBlock, openBlock, Teleport, createElementBlock, createCommentVNode, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString } from "vue";
import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
import './index.css';const _hoisted_1 = { class: "context-menu-content" };
const _hoisted_2 = {
  key: 0,
  class: "context-menu-separator"
};
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "menu-item-content" };
const _hoisted_5 = {
  key: 0,
  class: "menu-item-icon"
};
const _hoisted_6 = { class: "menu-item-label" };
const _hoisted_7 = {
  key: 1,
  class: "menu-item-shortcut"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    visible: { type: Boolean, default: false },
    position: { default: () => ({ x: 0, y: 0 }) },
    items: { default: () => [] },
    variant: { default: "glass" },
    theme: { default: "light" },
    teleportTarget: { default: ".monaco-editor" }
  },
  emits: ["itemClick", "hide"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const menuStyle = computed(() => ({
      left: `${props.position.x}px`,
      top: `${props.position.y}px`,
      display: props.visible ? "block" : "none"
    }));
    const menuClasses = computed(() => ({
      "context-menu": true,
      "context-menu--classic": props.variant === "classic",
      "context-menu--glass": props.variant === "glass",
      "context-menu--direction-up": props.position?.direction === "up",
      "context-menu--direction-down": props.position?.direction === "down"
    }));
    const isDarkTheme = computed(() => {
      return props.theme && props.theme.toLowerCase().includes("dark");
    });
    const themeClasses = computed(() => ({
      "theme-light": !isDarkTheme.value,
      "theme-dark": isDarkTheme.value
    }));
    const handleItemClick = (item) => {
      if (item.type === "item" && !item.disabled) {
        emit("itemClick", item);
      }
    };
    const handleMenuClick = (event) => {
      event.stopPropagation();
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Teleport, {
        to: props.teleportTarget
      }, [
        _ctx.visible ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass({ ...menuClasses.value, ...themeClasses.value }),
          style: normalizeStyle(menuStyle.value),
          onClick: handleMenuClick
        }, [
          createElementVNode("div", _hoisted_1, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
              return openBlock(), createElementBlock(Fragment, { key: index }, [
                item.type === "separator" ? (openBlock(), createElementBlock("div", _hoisted_2)) : (openBlock(), createElementBlock("div", {
                  key: 1,
                  class: normalizeClass(["context-menu-item", { disabled: item.disabled }]),
                  onClick: ($event) => handleItemClick(item)
                }, [
                  createElementVNode("div", _hoisted_4, [
                    item.icon ? (openBlock(), createElementBlock("div", _hoisted_5, [
                      createElementVNode("i", {
                        class: normalizeClass(item.icon)
                      }, null, 2)
                    ])) : createCommentVNode("", true),
                    createElementVNode("div", _hoisted_6, toDisplayString(item.label), 1),
                    item.shortcut ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(item.shortcut), 1)) : createCommentVNode("", true)
                  ])
                ], 10, _hoisted_3))
              ], 64);
            }), 128))
          ])
        ], 6)) : createCommentVNode("", true)
      ], 8, ["to"]);
    };
  }
});
const ContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0d03bcc5"]]);
export {
  ContextMenu as default
};
//# sourceMappingURL=index.js.map