v-contextmenu/dist/index.esm.js

import { isRef, defineComponent, ref, computed, reactive, watch, onBeforeUnmount, provide, withDirectives, createVNode, vShow, Teleport, isVNode, nextTick, inject } from 'vue';

var bind = function bind(el, binding) {
  var _binding$instance;

  var contextmenuKey = binding.arg;

  if (!contextmenuKey) {
    console.error("参数有误");
    return;
  }

  var contextmenuOptions = binding.value;
  var contextmenuRef = isRef(contextmenuKey) ? contextmenuKey.value : (_binding$instance = binding.instance) === null || _binding$instance === void 0 ? void 0 : _binding$instance.$refs[contextmenuKey];

  if (!contextmenuRef) {
    console.error("\u6CA1\u6709\u627E\u5230 ".concat(contextmenuKey, " \u5BF9\u5E94\u7684\u5B9E\u4F8B"));
    return;
  }

  if (typeof contextmenuRef.addReference !== "function") {
    console.error("".concat(contextmenuKey, " \u5BF9\u5E94\u7684\u5B9E\u4F8B\u4E0D\u662F VContextmenu"));
    return;
  }

  el.$contextmenuKey = contextmenuKey;
  contextmenuRef.addReference(el, contextmenuOptions);
};

var unbind = function unbind(el, binding) {
  var _binding$instance2;

  var contextmenuKey = el.$contextmenuKey;
  if (!contextmenuKey) return;
  var contextmenuRef = (_binding$instance2 = binding.instance) === null || _binding$instance2 === void 0 ? void 0 : _binding$instance2.$refs[contextmenuKey];
  contextmenuRef === null || contextmenuRef === void 0 ? void 0 : contextmenuRef.removeReference(el);
};

var rebind = function rebind(el, binding) {
  unbind(el, binding);
  bind(el, binding);
};

var contextmenuDirective = {
  mounted: bind,
  updated: rebind,
  beforeUnmount: unbind
};

var CLASSES = {
  contextmenu: "v-contextmenu",
  // 根元素
  contextmenuIcon: "v-contextmenu-icon",
  // icon
  contextmenuInner: "v-contextmenu-inner",
  // 菜单根元素
  contextmenuDivider: "v-contextmenu-divider",
  // 分割线
  contextmenuItem: "v-contextmenu-item",
  // 单个菜单
  contextmenuItemHover: "v-contextmenu-item--hover",
  // 单个菜单激活状态
  contextmenuItemDisabled: "v-contextmenu-item--disabled",
  // 单个菜单禁用状态
  contextmenuGroup: "v-contextmenu-group",
  // 按钮组根元素
  contextmenuGroupTitle: "v-contextmenu-group__title",
  // 按钮组标题
  contextmenuGroupMenus: "v-contextmenu-group__menus",
  // 按钮组按钮容器
  contextmenuSubmenu: "v-contextmenu-submenu",
  // 子菜单容器
  contextmenuSubmenuTitle: "v-contextmenu-submenu__title",
  // 子菜单标题
  contextmenuSubmenuMenus: "v-contextmenu-submenu__menus",
  // 子菜单
  contextmenuSubmenuMenusTop: "v-contextmenu-submenu__menus--top",
  // 子菜单 Top
  contextmenuSubmenuMenusRight: "v-contextmenu-submenu__menus--right",
  // 子菜单 Right
  contextmenuSubmenuMenusBottom: "v-contextmenu-submenu__menus--bottom",
  // 子菜 Bottom单
  contextmenuSubmenuMenusLeft: "v-contextmenu-submenu__menus--left",
  // 子菜单 Left
  contextmenuSubmenuArrow: "v-contextmenu-submenu__arrow" // 子菜单标题 icon

};

function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}

var DEFAULT_REFERENCE_OPTIONS = {
  trigger: ["contextmenu"]
};
var Contextmenu = defineComponent({
  name: "VContextmenu",
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    autoAjustPlacement: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    teleport: {
      type: [String, Object],
      default: function _default() {
        return "body";
      }
    } // destroyOnHide: {
    //   type: Boolean,
    //   default: false,
    // },

  },
  emits: ["show", "hide", "update:modelValue"],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var contextmenuRef = ref(null);
    var visible = ref(props.modelValue || false);

    var toggle = function toggle(value) {
      visible.value = value;
      emit("update:modelValue", value);
    };

    var position = ref({
      top: 0,
      left: 0
    });
    var style = computed(function () {
      return {
        top: "".concat(position.value.top, "px"),
        left: "".concat(position.value.left, "px")
      };
    });
    var currentOptions = ref(null);

    var show = function show(evt, options) {
      var targetOptions = evt instanceof Event ? options : evt;
      var autoAjustPlacement = (targetOptions === null || targetOptions === void 0 ? void 0 : targetOptions.autoAjustPlacement) || props.autoAjustPlacement;
      var targetPosition = {
        top: (targetOptions === null || targetOptions === void 0 ? void 0 : targetOptions.top) || 0,
        left: (targetOptions === null || targetOptions === void 0 ? void 0 : targetOptions.left) || 0
      };

      if (evt instanceof Event) {
        var _targetOptions$top, _targetOptions$left;

        evt.preventDefault();
        targetPosition.top = (_targetOptions$top = targetOptions === null || targetOptions === void 0 ? void 0 : targetOptions.top) !== null && _targetOptions$top !== void 0 ? _targetOptions$top : evt.pageY;
        targetPosition.left = (_targetOptions$left = targetOptions === null || targetOptions === void 0 ? void 0 : targetOptions.left) !== null && _targetOptions$left !== void 0 ? _targetOptions$left : evt.pageX;
      }

      toggle(true);
      nextTick(function () {
        if (autoAjustPlacement) {
          var el = contextmenuRef.value;
          if (!el) return;
          var width = el.clientWidth;
          var height = el.clientHeight;

          if (height + targetPosition.top >= window.innerHeight + window.scrollY) {
            var targetTop = targetPosition.top - height;

            if (targetTop > window.scrollY) {
              targetPosition.top = targetTop;
            }
          }

          if (width + targetPosition.left >= window.innerWidth + window.scrollX) {
            var targetWidth = targetPosition.left - width;

            if (targetWidth > window.scrollX) {
              targetPosition.left = targetWidth;
            }
          }
        }

        position.value = targetPosition; // TODO: 添加回掉参数

        emit("show");
      });
    };

    var hide = function hide() {
      currentOptions.value = null;
      toggle(false); // TODO: 添加回掉参数

      emit("hide");
    };

    var references = reactive(new Map());
    var currentReference = ref();
    var currentReferenceOptions = computed(function () {
      return currentReference.value && references.get(currentReference.value);
    });

    var addReference = function addReference(el, options) {
      var triggers = function () {
        if (options !== null && options !== void 0 && options.trigger) {
          return Array.isArray(options.trigger) ? options.trigger : [options.trigger];
        }

        return DEFAULT_REFERENCE_OPTIONS.trigger;
      }();

      var handler = function handler(evt) {
        if (props.disabled) return;
        currentReference.value = el;
        show(evt, {});
      };

      triggers.forEach(function (eventType) {
        el.addEventListener(eventType, handler);
      });
      references.set(el, {
        triggers: triggers,
        handler: handler
      });
    };

    var removeReference = function removeReference(el) {
      var options = references.get(el);
      if (!options) return;
      options.triggers.forEach(function (eventType) {
        el.removeEventListener(eventType, options.handler);
      });
      references.delete(el);
    };

    var onBodyClick = function onBodyClick(evt) {
      if (!evt.target || !contextmenuRef.value || !currentReference.value) return;
      var notOutside = contextmenuRef.value.contains(evt.target) || currentReferenceOptions.value && currentReferenceOptions.value.triggers.includes("click") && currentReference.value.contains(evt.target);

      if (!notOutside) {
        toggle(false);
      }
    }; // watch(props.modelValue, (value) => {
    //   if (value !== visible.value) {
    //     toggle(value);
    //   }
    // });


    watch(visible, function (value) {
      if (value) {
        document.addEventListener("click", onBodyClick);
      } else {
        document.removeEventListener("click", onBodyClick);
      }
    });
    onBeforeUnmount(function () {
      document.removeEventListener("click", onBodyClick);
    });
    provide("visible", visible);
    provide("autoAjustPlacement", props.autoAjustPlacement);
    provide("show", show);
    provide("hide", hide);
    return {
      visible: visible,
      style: style,
      currentReferenceOptions: currentReferenceOptions,
      currentOptions: currentOptions,
      contextmenuRef: contextmenuRef,
      addReference: addReference,
      removeReference: removeReference,
      toggle: toggle,
      show: show,
      hide: hide
    };
  },
  methods: {
    renderContent: function renderContent() {
      var _this$$slots$default, _this$$slots;

      return withDirectives(createVNode("div", {
        "class": CLASSES.contextmenu,
        "ref": "contextmenuRef",
        "style": this.style
      }, [createVNode("ul", {
        "class": CLASSES.contextmenuInner
      }, [(_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots, {
        triggerOptions: "currentReferenceOptions",
        options: "currentOptions"
      })])]), [[vShow, "visible"]]);
    }
  },
  render: function render() {
    var _slot;

    if (!this.visible) return null;
    return this.teleport ? createVNode(Teleport, {
      "to": this.teleport
    }, _isSlot(_slot = this.renderContent()) ? _slot : {
      default: function _default() {
        return [_slot];
      }
    }) : this.renderContent();
  }
});

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var ContextmenuItem = defineComponent({
  name: "VContextmenuItem",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    hideOnClick: {
      type: Boolean,
      default: true
    }
  },
  emits: ["click", "mouseenter", "mouseleave"],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var rootHide = inject("hide");
    var hover = ref(false);
    var classes = computed(function () {
      var _ref2;

      return _ref2 = {}, _defineProperty(_ref2, CLASSES.contextmenuItem, true), _defineProperty(_ref2, CLASSES.contextmenuItemDisabled, props.disabled), _defineProperty(_ref2, CLASSES.contextmenuItemHover, hover.value), _ref2;
    });

    var handleClick = function handleClick(evt) {
      if (props.disabled) return;
      emit("click", evt);
      props.hideOnClick && (rootHide === null || rootHide === void 0 ? void 0 : rootHide());
    };

    var handleMouseenter = function handleMouseenter(evt) {
      if (props.disabled) return;
      hover.value = true;
      emit("mouseenter", evt);
    };

    var handleMouseleave = function handleMouseleave(evt) {
      if (props.disabled) return;
      hover.value = false;
      emit("mouseleave", evt);
    };

    return {
      classes: classes,
      handleClick: handleClick,
      handleMouseenter: handleMouseenter,
      handleMouseleave: handleMouseleave
    };
  },
  render: function render() {
    var _this$$slots$default, _this$$slots;

    return createVNode("li", {
      "class": this.classes,
      "onClick": this.handleClick,
      "onMouseenter": this.handleMouseenter,
      "onMouseleave": this.handleMouseleave
    }, [(_this$$slots$default = (_this$$slots = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)]);
  }
});

var ContextmenuDivider = defineComponent({
  name: "VContextmenuDivider",
  render: function render() {
    return createVNode("li", {
      "class": CLASSES.contextmenuDivider
    }, null);
  }
});

var ContextmenuIcon = defineComponent({
  name: "VContextmenuIcon",
  props: {
    name: {
      type: String,
      required: true
    }
  },
  render: function render() {
    return createVNode("i", {
      "class": [CLASSES.contextmenuIcon, "".concat(CLASSES.contextmenuIcon, "-").concat(this.name)]
    }, null);
  }
});

var ContextmenuSubmenu = defineComponent({
  name: "VContextmenuSubmenu",
  props: {
    title: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ["mouseenter", "mouseleave"],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;
    var submenuRef = ref(null);
    var autoAjustPlacement = inject("autoAjustPlacement");
    var placements = ref(["top", "right"]);
    var hover = ref(false);

    var handleMouseenter = function handleMouseenter(evt) {
      if (props.disabled) return;
      hover.value = true;
      emit("mouseenter", evt);
      nextTick(function () {
        var targetPlacements = [];

        if (autoAjustPlacement) {
          var target = evt.target;
          var targetDimension = target.getBoundingClientRect();
          if (!submenuRef.value) return;
          var submenuWidth = submenuRef.value.clientWidth;
          var submenuHeight = submenuRef.value.clientHeight;

          if (targetDimension.right + submenuWidth >= window.innerWidth) {
            targetPlacements.push("left");
          } else {
            targetPlacements.push("right");
          }

          if (targetDimension.bottom + submenuHeight >= window.innerHeight) {
            targetPlacements.push("bottom");
          } else {
            targetPlacements.push("top");
          }
        }

        placements.value = targetPlacements;
      });
    };

    var handleMouseleave = function handleMouseleave(evt) {
      if (props.disabled) return;
      hover.value = false;
      emit("mouseleave", evt);
    };

    var titleClasses = computed(function () {
      var _ref2;

      return _ref2 = {}, _defineProperty(_ref2, CLASSES.contextmenuItem, true), _defineProperty(_ref2, CLASSES.contextmenuSubmenuTitle, true), _defineProperty(_ref2, CLASSES.contextmenuItemHover, hover.value), _defineProperty(_ref2, CLASSES.contextmenuItemDisabled, props.disabled), _ref2;
    });
    var menusClasses = computed(function () {
      var _ref3;

      return _ref3 = {}, _defineProperty(_ref3, CLASSES.contextmenu, true), _defineProperty(_ref3, CLASSES.contextmenuSubmenuMenus, true), _defineProperty(_ref3, CLASSES.contextmenuSubmenuMenusTop, placements.value.includes("top")), _defineProperty(_ref3, CLASSES.contextmenuSubmenuMenusRight, placements.value.includes("right")), _defineProperty(_ref3, CLASSES.contextmenuSubmenuMenusBottom, placements.value.includes("bottom")), _defineProperty(_ref3, CLASSES.contextmenuSubmenuMenusLeft, placements.value.includes("left")), _ref3;
    });
    return {
      hover: hover,
      submenuRef: submenuRef,
      titleClasses: titleClasses,
      menusClasses: menusClasses,
      handleMouseenter: handleMouseenter,
      handleMouseleave: handleMouseleave
    };
  },
  render: function render() {
    var _this$$slots$title, _this$$slots, _this$$slots$default, _this$$slots2;

    return createVNode("li", {
      "class": CLASSES.contextmenuSubmenu,
      "onMouseenter": this.handleMouseenter,
      "onMouseleave": this.handleMouseleave
    }, [createVNode("div", {
      "class": this.titleClasses
    }, [((_this$$slots$title = (_this$$slots = this.$slots).title) === null || _this$$slots$title === void 0 ? void 0 : _this$$slots$title.call(_this$$slots)) || this.title, createVNode("span", {
      "class": CLASSES.contextmenuSubmenuArrow
    }, [createVNode(ContextmenuIcon, {
      "name": "right-arrow"
    }, null)])]), this.hover ? createVNode("div", {
      "ref": "submenuRef",
      "class": this.menusClasses
    }, [createVNode("ul", {
      "class": CLASSES.contextmenuInner
    }, [(_this$$slots$default = (_this$$slots2 = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2)])]) : null]);
  }
});

var ContextmenuGroup = defineComponent({
  name: "VContextmenuGroup",
  props: {
    title: {
      type: String,
      default: undefined
    },
    maxWidth: {
      type: [Number, String],
      default: undefined
    }
  },
  setup: function setup(props) {
    var style = computed(function () {
      if (!props.maxWidth) return;
      return {
        "max-width": typeof props.maxWidth === "number" ? "".concat(props.maxWidth, "px") : props.maxWidth,
        "overflow-x": "auto"
      };
    });
    return {
      style: style
    };
  },
  methods: {
    renderTitle: function renderTitle() {
      var _this$$slots$title, _this$$slots;

      var content = ((_this$$slots$title = (_this$$slots = this.$slots).title) === null || _this$$slots$title === void 0 ? void 0 : _this$$slots$title.call(_this$$slots)) || this.title;
      return content ? createVNode("div", {
        "class": CLASSES.contextmenuGroupTitle
      }, [content]) : null;
    }
  },
  render: function render() {
    var _this$$slots$default, _this$$slots2;

    return createVNode("li", {
      "class": CLASSES.contextmenuGroup
    }, [this.renderTitle(), createVNode("ul", {
      "style": this.style,
      "class": CLASSES.contextmenuGroupMenus
    }, [(_this$$slots$default = (_this$$slots2 = this.$slots).default) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2)])]);
  }
});

var version = "3.0.0";

var install = function install(app) {
  app.directive("contextmenu", contextmenuDirective);
  app.component(Contextmenu.name, Contextmenu);
  app.component(ContextmenuItem.name, ContextmenuItem);
  app.component(ContextmenuDivider.name, ContextmenuDivider);
  app.component(ContextmenuSubmenu.name, ContextmenuSubmenu);
  app.component(ContextmenuGroup.name, ContextmenuGroup);
};
var VContextmenu = {
  install: install,
  version: version
};

export default VContextmenu;
export { Contextmenu, ContextmenuDivider, ContextmenuGroup, ContextmenuItem, ContextmenuSubmenu, contextmenuDirective as directive, install, version };