Add menu Transition support

Author: imengyu

examples/views/BasicComponent.vue

@@ -102,7 +102,10 @@ export default defineComponent({
         zIndex: 3,
         minWidth: 230,
         x: 500,
-        y: 200
+        y: 200,
+        //menuTransitionProps: {
+        //  name: 'fade',
+        //}
       } as MenuOptions,
     }
   },

examples/views/BasicUseage.vue

@@ -240,7 +240,7 @@ const menuData = reactive<MenuOptions>({
       label: 'Test item dynamic show and hide',
       clickClose: false,
       onClick: () => {
-        menuData.items[4].hidden = !menuData.items[4].hidden;
+        menuData.items![4].hidden = !menuData.items![4].hidden;
       },
     },
     { 
@@ -251,10 +251,10 @@ const menuData = reactive<MenuOptions>({
       label: 'Test item dynamic change the label',
       clickClose: false,
       onClick: () => {
-        if (menuData.items[5].label === 'Test item dynamic change the label')
-          menuData.items[5].label = 'My label CHANGED!';
+        if (menuData.items![5].label === 'Test item dynamic change the label')
+          menuData.items![5].label = 'My label CHANGED!';
         else
-          menuData.items[5].label = 'Test item dynamic change the label';
+          menuData.items![5].label = 'Test item dynamic change the label';
       },
     },
     { 
@@ -272,7 +272,7 @@ const menuData = reactive<MenuOptions>({
       children: [
         { 
           label: "Left Top", 
-          direction: 'lt',
+          direction: 'tl',
           children: [
             { label: "Item1" },
             { label: "Item2" },
@@ -290,7 +290,7 @@ const menuData = reactive<MenuOptions>({
         },
         { 
           label: "Left Bottom", 
-          direction: 'lb',
+          direction: 'bl',
           children: [
             { label: "Item1" },
             { label: "Item2" },
@@ -299,7 +299,7 @@ const menuData = reactive<MenuOptions>({
         },
         { 
           label: "Right Top", 
-          direction: 'rt',
+          direction: 'tr',
           children: [
             { label: "Item1" },
             { label: "Item2" },
@@ -395,6 +395,9 @@ const menuData = reactive<MenuOptions>({
   iconFontClass: 'iconfont',
   customClass: "class-a",
   keyboardControl: true,
+  //menuTransitionProps: {
+  //  name: 'fade'
+  //},
   zIndex: 3,
   minWidth: 230,
   x: 0,
@@ -410,7 +413,7 @@ function onContextMenu(e : MouseEvent) {
   menuData.x = e.x;
   menuData.y = e.y;
   //show our menu
-  ContextMenu.showContextMenu(menuData);
+  ContextMenu.showContextMenu(menuData as MenuOptions);
 }
 
 function onContextMenu1(e : MouseEvent) {
@@ -489,4 +492,13 @@ function onContextMenu3(e : MouseEvent, direction: string) {
 .class-a {
   font-family: 'Times New Roman', Times, serif;
 }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

library/ContextMenu.vue

@@ -44,24 +44,24 @@ export default defineComponent({
 
     return () => {  
       const { isNew, container, eleId } = genContainer(options.value);
-      const vnode = show.value ? [ h(ContextSubMenuWrapperConstructor as unknown as string, { 
-        options: options,
-        show: true,
-        container: container,
-        isFullScreenContainer: !isNew,
-        'onUpdate:show': (v: boolean) => ctx.emit('update:show', v),
-        onClose: (fromItem: undefined) => {
-          ctx.emit('update:show', false);
-          ctx.emit('close');
-          options.value.onClose?.(fromItem);
-        },
-      }, ctx.slots) ] : [];
       
       return [
         h(
           Teleport,
           { to: `#${eleId}` },
-          vnode
+          [
+            h(ContextSubMenuWrapperConstructor as unknown as string, { 
+              options: options,
+              show: show,
+              container: container,
+              isFullScreenContainer: !isNew,
+              onClose: (fromItem: undefined) => {
+                ctx.emit('update:show', false);
+                ctx.emit('close');
+                options.value.onClose?.(fromItem);
+              },
+            }, ctx.slots)
+          ]
         )
       ];
     }

library/ContextMenuDefine.ts

@@ -1,4 +1,4 @@
-import type { SVGAttributes, VNode } from "vue";
+import type { SVGAttributes, TransitionProps, VNode } from "vue";
 
 /**
  * Default config
@@ -31,6 +31,8 @@ export interface ContextMenuInstance {
 }
 
 export type MenuPopDirection = 'br'|'b'|'bl'|'tr'|'t'|'tl'|'l'|'r';
+export type MenuChildren = MenuItem[];
+
 
 export interface MenuOptions {
   /**
@@ -144,6 +146,11 @@ export interface MenuOptions {
    * Only for css font icon, If you use the svg icon, you do not need to use this.
    */
   iconFontClass ?:	string;
+  /**
+   * The Vue Transition props used when menu show or hide.
+   * @default ''
+   */
+  menuTransitionProps ?: TransitionProps;
   /**
    * Should a fixed-width icon area be reserved for menu items without icon. (global)
    * 
@@ -362,7 +369,7 @@ export interface MenuItem {
   /**
    * Child menu items (Valid in function mode).
    */
-  children ?: MenuItem[],
+  children ?: MenuChildren,
 }
 
 export interface ContextMenuPositionData {

library/ContextMenuInstance.ts

@@ -1,8 +1,8 @@
-import { h, render } from "vue";
+import { h, ref, render } from "vue";
 import type { App, Slot } from "vue";
 import type { ContextMenuInstance } from "./ContextMenuDefine";
 import type { MenuOptions } from "./ContextMenuDefine";
-import { closeContextMenu } from "./ContextMenuMutex";
+import { checkOpenedContextMenu, closeContextMenu } from "./ContextMenuMutex";
 import { genContainer, transformMenuPosition } from "./ContextMenuUtils";
 import ContextMenuConstructor from './ContextMenu.vue'
 import ContextSubMenuWrapperConstructor from './ContextSubMenuWrapper.vue'
@@ -17,14 +17,18 @@ function initInstance(
   isNew: boolean, 
   customSlots?: Record<string, Slot>,
 ) {
+  const show = ref(true);
   const vnode = h(ContextSubMenuWrapperConstructor, { 
     options: options,
-    show: true,
+    show: show,
     container: container,
     isFullScreenContainer: !isNew,
-    onClose: (item: undefined) => {
+    onCloseAnimFinished: () => {
       render(null, container);
+    },
+    onClose: (item: undefined) => {
       options.onClose?.(item);
+      show.value = false;
     },
   }, customSlots);
   render(vnode, container);
@@ -117,7 +121,7 @@ export default {
    * Get if there is a menu open now.
    */
   isAnyContextMenuOpen() {
-
+    return checkOpenedContextMenu();
   },
   /**
    * Close the currently open menu