@imengyu/vue3-context-menu 1.2.0 → 1.2.2

package/README.CN.md

@@ -11,7 +11,7 @@
 
 * 简洁易用，体积小
 * 提供组件模式和函数模式，调用方便
-* 提供多个菜单主体供您使用
+* 提供多个菜单主题供您使用
 * 可自定义
 
 ### 用法

package/README.md

@@ -13,6 +13,7 @@ English | [简体中文](https://github.com/imengyu/vue3-context-menu/blob/main/
 
 * Simple and easy to use, small size
 * Provide component mode and function mode
+* Provide multiple theme styles for your use
 * Customizable
 
 ## Documentation

package/lib/vue3-context-menu.common.js

@@ -3050,9 +3050,9 @@ var es_array_index_of = __webpack_require__(2772);
 var es_array_for_each = __webpack_require__(9554);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.splice.js
 var es_array_splice = __webpack_require__(561);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuItem.vue?vue&type=template&id=6785ddf2&ts=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuItem.vue?vue&type=template&id=f61bf578&ts=true
 
-var ContextMenuItemvue_type_template_id_6785ddf2_ts_true_hoisted_1 = {
+var ContextMenuItemvue_type_template_id_f61bf578_ts_true_hoisted_1 = {
   key: 0,
   "class": "mx-context-menu-item-wrapper",
   ref: "menuItemRef",
@@ -3072,14 +3072,14 @@ var _hoisted_5 = {
 var _hoisted_6 = {
   "class": "mx-shortcut"
 };
-function ContextMenuItemvue_type_template_id_6785ddf2_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ContextMenuItemvue_type_template_id_f61bf578_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_VNodeRender = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("VNodeRender");
 
   var _component_ContextMenuIconCheck = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("ContextMenuIconCheck");
 
   var _component_ContextMenuIconRight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("ContextMenuIconRight");
 
-  return !_ctx.hidden ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ContextMenuItemvue_type_template_id_6785ddf2_ts_true_hoisted_1, [_ctx.globalHasSlot('itemRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
+  return !_ctx.hidden ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ContextMenuItemvue_type_template_id_f61bf578_ts_true_hoisted_1, [_ctx.globalHasSlot('itemRender') ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_VNodeRender, {
     key: 0,
     vnode: function vnode() {
       return _ctx.globalRenderSlot('itemRender', _ctx.getItemDataForChildren());
@@ -3164,7 +3164,7 @@ function ContextMenuItemvue_type_template_id_6785ddf2_ts_true_render(_ctx, _cach
     key: 3
   }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./src/ContextMenuItem.vue?vue&type=template&id=6785ddf2&ts=true
+;// CONCATENATED MODULE: ./src/ContextMenuItem.vue?vue&type=template&id=f61bf578&ts=true
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuIconCheck.vue?vue&type=template&id=f3b78eb6
 
@@ -3462,18 +3462,20 @@ const ContextMenuIconRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
       if (disabled.value || e && e.target.classList.contains('mx-context-no-clickable')) return; //Has submenu?
 
       if (hasChildren.value) {
-        if (clickableWhenHasChildren.value && typeof clickHandler.value === 'function') clickHandler.value();else if (!_showSubMenu.value) onMouseEnter();
+        if (clickableWhenHasChildren.value) {
+          if (typeof clickHandler.value === 'function') clickHandler.value();
+          context.emit('click');
+        } else if (!_showSubMenu.value) onMouseEnter();
       } else {
         //Call hander from options
         if (typeof clickHandler.value === 'function') clickHandler.value();
+        context.emit('click');
 
         if (clickClose.value) {
           //emit close
           globalCloseMenu();
         }
       }
-
-      context.emit('click');
     } //MouseEnter handler: show item submenu
 
 
@@ -3538,7 +3540,7 @@ const ContextMenuIconRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
 
 
 ;
-const ContextMenuItem_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ContextMenuItemvue_type_script_lang_ts, [['render',ContextMenuItemvue_type_template_id_6785ddf2_ts_true_render]])
+const ContextMenuItem_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ContextMenuItemvue_type_script_lang_ts, [['render',ContextMenuItemvue_type_template_id_f61bf578_ts_true_render]])
 
 /* harmony default export */ const ContextMenuItem = (ContextMenuItem_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[2]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextMenuSeparator.vue?vue&type=template&id=27643a0a&ts=true
@@ -4018,7 +4020,7 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
       document.removeEventListener("contextmenu", onBodyClick, true);
       document.removeEventListener("click", onBodyClick, true);
       document.removeEventListener("wheel", onBodyWhell, true);
-      if (options.value.keyboardControl) document.removeEventListener('keydown', onMenuKeyDown);
+      if (options.value.keyboardControl !== false) document.removeEventListener('keydown', onMenuKeyDown);
     } //For keyboard event, remember which submenu is active
 
 
@@ -4030,11 +4032,7 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
     function onMenuKeyDown(e) {
       var _currentOpenedMenu$va3, _currentOpenedMenu$va4, _currentOpenedMenu$va5, _currentOpenedMenu$va6, _currentOpenedMenu$va8, _currentOpenedMenu$va9;
 
-      if (currentOpenedMenu.value) {
-        e.stopPropagation();
-        e.preventDefault();
-      } //Handle keyboard event
-
+      var handled = true; //Handle keyboard event
 
       switch (e.key) {
         case "Escape":
@@ -4083,6 +4081,15 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
         case "Enter":
           (_currentOpenedMenu$va9 = currentOpenedMenu.value) === null || _currentOpenedMenu$va9 === void 0 ? void 0 : _currentOpenedMenu$va9.triggerCurrentItemClick();
           break;
+
+        default:
+          handled = false;
+          break;
+      }
+
+      if (handled && currentOpenedMenu.value) {
+        e.stopPropagation();
+        e.preventDefault();
       }
     }
 
@@ -4185,10 +4192,10 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
 }));
 ;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue?vue&type=script&lang=ts
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=3dc2078b&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=46acb3c0&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=3dc2078b&lang=css
+;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=46acb3c0&lang=css
 
 ;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue
 
@@ -4356,6 +4363,54 @@ function _typeof(obj) {
       "default": 'iconfont'
     },
 
+    /**
+     * Is this menu item checked?
+     *
+     * The check mark are displayed on the left side of the icon, so it is not recommended to display the icon at the same time.
+     */
+    checked: {
+      type: Boolean,
+      "default": false
+    },
+
+    /**
+     * Shortcut key text display on the right.
+     *
+     * The shortcut keys here are only for display. You need to handle the key events by yourself.
+     */
+    shortcut: {
+      type: String,
+      "default": ''
+    },
+
+    /**
+     * Display icons use svg symbol (`<use xlink:href="#icon-symbol-name">`) ， only valid when icon attribute is empty.
+     */
+    svgIcon: {
+      type: String,
+      "default": ''
+    },
+
+    /**
+     * The user-defined attribute of the svg tag, which is valid when using `svgIcon`.
+     */
+    svgProps: {
+      type: Object,
+      "default": null
+    },
+
+    /**
+     * Should a fixed-width icon area be reserved for menu items without icon. (this item)
+     *
+     * Default is true .
+     *
+     * The width of icon area can be override with css var `--mx-menu-placeholder-width`.
+     */
+    preserveIconWidth: {
+      type: Boolean,
+      "default": true
+    },
+
     /**
      * Show right arrow on this menu?
      */