@imengyu/vue3-context-menu 1.1.9 → 1.1.10

package/examples/views/BasicComponent.vue

@@ -81,7 +81,7 @@ v-model:show="show"
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { MenuOptions } from '../..';
+import { MenuOptions } from '../../src/ContextMenuDefine';
 
 export default defineComponent({
   mounted() {

package/examples/views/BasicCustomize.vue

@@ -59,7 +59,8 @@ this.$contextmenu({
 
 <script lang="ts">
 import { defineComponent, h } from 'vue'
-import ContextMenu, { MenuOptions } from '../..';
+import ContextMenu from '../../src/ContextMenuInstance';
+import type { MenuOptions } from '../../src/ContextMenuDefine';
 
 export default defineComponent({
   mounted() {

package/examples/views/ChangeContainer.vue

@@ -57,7 +57,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import { MenuOptions } from '../../src/ContextMenuDefine';
 import ContextMenuComponent from '../../src/ContextMenu.vue';

package/examples/views/ComponentCustomize.vue

@@ -19,82 +19,86 @@
     You can open examples\views\ComponentCustomize.vue file view complete source code.
   </div>
 
-  <!--this is component mode of context-menu-->
-  <context-menu
-    v-model:show="show"
-    :options="options"
-  >
-    <context-menu-item label="Simple item" @click="alertContextMenuItemClicked('Item1')" />
-    <context-menu-item label="Item with a icon (iconfont)" icon="icon-reload-1" @click="alertContextMenuItemClicked('Item2')" />
-    <context-menu-item label="Item with custom icon slot" @click="alertContextMenuItemClicked('Item3')">
-      <template #icon>
-        <img src="https://imengyu.top/assets/images/test/icon.png" style="width:20px;height:20px" />
-      </template>
-    </context-menu-item>
-    <context-menu-item :clickClose="false">
-      <template #icon>
-        <img src="https://imengyu.top/assets/images/test/icon.png" style="width:16px;height:16px" />
-      </template>
-      <template #label>
-        <div>Item with custom render</div>
-        <select placeholder="Select a fruit">
-          <option value="1">apple</option>
-          <option value="2">watermelon</option>
-          <option value="3">grape</option>
-        </select>
-      </template>
-    </context-menu-item>
-  </context-menu>
+  <div>
+
+    <!--this is component mode of context-menu-->
+    <context-menu
+      v-model:show="show"
+      :options="options"
+    >
+      <context-menu-item label="Simple item" @click="alertContextMenuItemClicked('Item1')" />
+      <context-menu-item label="Item with a icon (iconfont)" icon="icon-reload-1" @click="alertContextMenuItemClicked('Item2')" />
+      <context-menu-item label="Item with custom icon slot" @click="alertContextMenuItemClicked('Item3')">
+        <template #icon>
+          <img src="https://imengyu.top/assets/images/test/icon.png" style="width:20px;height:20px" />
+        </template>
+      </context-menu-item>
+      <context-menu-item :clickClose="false">
+        <template #icon>
+          <img src="https://imengyu.top/assets/images/test/icon.png" style="width:16px;height:16px" />
+        </template>
+        <template #label>
+          <div>Item with custom render</div>
+          <select placeholder="Select a fruit">
+            <option value="1">apple</option>
+            <option value="2">watermelon</option>
+            <option value="3">grape</option>
+          </select>
+        </template>
+      </context-menu-item>
+    </context-menu>
 
-  <!--this is Full Customized context-menu-->
-  <context-menu
-    v-model:show="show2"
-    :options="options2"
-  >
-    <!--itemRender slot can customize the rendering of the entire menu item-->
-    <template #itemRender="{ disabled, label, icon, showRightArrow, onClick, onMouseEnter }">
-      <div 
-        :class="'my-menu-item'+(disabled?' disabled':'')"
-        @click="onClick"
-        @mouseenter="onMouseEnter"
-      >
-        <img v-if="icon" :src="icon" />
-        <div v-else class="icon-place-holder"></div>
-        <span>{{label}}</span>
-        <span v-if="showRightArrow" class="right-arraw">>></span>
-      </div>
-    </template>
+    <!--this is Full Customized context-menu-->
+    <context-menu
+      v-model:show="show2"
+      :options="options2"
+    >
+      <!--itemRender slot can customize the rendering of the entire menu item-->
+      <template #itemRender="{ disabled, label, icon, showRightArrow, onClick, onMouseEnter }">
+        <div 
+          :class="'my-menu-item'+(disabled?' disabled':'')"
+          @click="onClick"
+          @mouseenter="onMouseEnter"
+        >
+          <img v-if="icon" :src="icon" />
+          <div v-else class="icon-place-holder"></div>
+          <span>{{label}}</span>
+          <span v-if="showRightArrow" class="right-arraw">>></span>
+        </div>
+      </template>
 
-    <context-menu-item label="Simple item" @click="alertContextMenuItemClicked('Item1')" />
-    <context-menu-item label="Item with a icon" icon="https://imengyu.top/assets/images/test/icon.png" @click="alertContextMenuItemClicked('Item2')" />
-    <context-menu-group label="Menu with child">
-      <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
-      <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
-    </context-menu-group>
-    <div class="my-menu-sperator"></div>
-    <context-menu-group label="Menu with child child child">
-      <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
-      <context-menu-item label="Item2" @click="alertContextMenuItemClicked('Item2')" />
-      <context-menu-group label="Child with v-for 50">
-        <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="alertContextMenuItemClicked('Item3' + index)" />
+      <context-menu-item label="Simple item" @click="alertContextMenuItemClicked('Item1')" />
+      <context-menu-item label="Item with a icon" icon="https://imengyu.top/assets/images/test/icon.png" @click="alertContextMenuItemClicked('Item2')" />
+      <context-menu-group label="Menu with child">
+        <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
+        <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
       </context-menu-group>
       <div class="my-menu-sperator"></div>
-      <context-menu-group label="Childs">
-        <context-menu-item label="Item1-1" @click="alertContextMenuItemClicked('Item1-1')" />
-        <context-menu-item label="Item1-2" @click="alertContextMenuItemClicked('Item1-2')" />
+      <context-menu-group label="Menu with child child child">
+        <context-menu-item label="Item1" @click="alertContextMenuItemClicked('Item1')" />
+        <context-menu-item label="Item2" @click="alertContextMenuItemClicked('Item2')" />
+        <context-menu-group label="Child with v-for 50">
+          <context-menu-item v-for="index of 50" :key="index" :label="'Item3-'+index" @click="alertContextMenuItemClicked('Item3' + index)" />
+        </context-menu-group>
         <div class="my-menu-sperator"></div>
         <context-menu-group label="Childs">
-          <context-menu-item label="Item2-1" @click="alertContextMenuItemClicked('Item2-1')" />
-          <context-menu-item label="Item2-2" @click="alertContextMenuItemClicked('Item2-2')" />
+          <context-menu-item label="Item1-1" @click="alertContextMenuItemClicked('Item1-1')" />
+          <context-menu-item label="Item1-2" @click="alertContextMenuItemClicked('Item1-2')" />
+          <div class="my-menu-sperator"></div>
+          <context-menu-group label="Childs">
+            <context-menu-item label="Item2-1" @click="alertContextMenuItemClicked('Item2-1')" />
+            <context-menu-item label="Item2-2" @click="alertContextMenuItemClicked('Item2-2')" />
+          </context-menu-group>
         </context-menu-group>
       </context-menu-group>
-    </context-menu-group>
-  </context-menu>
+    </context-menu>
+
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { MenuOptions } from '../..';
+import { MenuOptions } from '../../src/ContextMenuDefine';
 
 export default defineComponent({
   data() {

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

@@ -2804,12 +2804,9 @@ function genContainer(options) {
   }
 
   var container = document.getElementById(DEFAULT_CONTAINER_ID);
-
-  if (!container) {
-    container = document.createElement('div');
-    container.setAttribute('id', DEFAULT_CONTAINER_ID);
-  }
-
+  if (container) document.body.removeChild(container);
+  container = document.createElement('div');
+  container.setAttribute('id', DEFAULT_CONTAINER_ID);
   container.setAttribute('class', 'mx-menu-ghost-host');
   container.style.zIndex = (zIndex === null || zIndex === void 0 ? void 0 : zIndex.toString()) || MenuConstOptions.defaultZindex.toString();
   document.body.appendChild(container);
@@ -3583,7 +3580,7 @@ const ContextSubMenu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Con
         document.addEventListener("click", onBodyClick, true);
         document.addEventListener("contextmenu", onBodyClick, true);
         document.addEventListener("wheel", onBodyWhell, true);
-      }, 400);
+      }, 100);
     }
 
     function removeBodyEvents() {
@@ -3664,10 +3661,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=c5c189e8&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=5b00cf42&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=c5c189e8&lang=css
+;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue?vue&type=style&index=0&id=5b00cf42&lang=css
 
 ;// CONCATENATED MODULE: ./src/ContextSubMenuWrapper.vue
 
@@ -3711,37 +3708,49 @@ const ContextSubMenuWrapper_exports_ = ContextSubMenuWrappervue_type_script_lang
         options = _toRefs.options,
         show = _toRefs.show;
 
-    var _genContainer = genContainer(options.value),
-        container = _genContainer.container,
-        isNew = _genContainer.isNew;
-
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(show, function (v) {
-      if (v) {
-        if (isNew) removeContainer(container);
+    var currentContainer = null;
+    var currentContainerIsNew = false;
 
-        var _v = genContainer(options.value);
+    function openMenu() {
+      var _genContainer = genContainer(options.value),
+          container = _genContainer.container,
+          isNew = _genContainer.isNew;
 
-        container = _v.container;
-        isNew = _v.isNew;
-      }
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onBeforeUnmount)(function () {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(null, container);
-      if (isNew) removeContainer(container);
-    });
-    return function () {
       var vnode = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(ContextSubMenuWrapper, {
         options: options,
-        show: show.value,
+        show: true,
         container: container,
         'onUpdate:show': function onUpdateShow(v) {
           return ctx.emit('update:show', v);
         },
         onClose: function onClose() {
-          return ctx.emit('close');
+          (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(null, container);
+          ctx.emit('close');
         }
       }, ctx.slots);
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(vnode, container);
+      currentContainerIsNew = isNew;
+      currentContainer = container;
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(vnode, container);
+    }
+
+    function closeMenu() {
+      if (currentContainer) {
+        if (currentContainerIsNew) removeContainer(currentContainer);
+        currentContainer = null;
+      }
+    }
+
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(show, function (v) {
+      if (v) openMenu();else closeMenu();
+    }); //watch(() => options.value.x, () => checkAndRecreate());
+    //watch(() => options.value.y, () => checkAndRecreate());
+
+    ctx.expose({
+      open: openMenu,
+      close: closeMenu
+    });
+    return function () {
+      return [];
     };
   }
 }));
@@ -3909,7 +3918,7 @@ function initInstance(options, container, isNew, customSlots) {
     show: true,
     container: container,
     onClose: function onClose() {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(null, container);
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(null, container);
     }
   }, customSlots);
   (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.render)(vnode, container);