Add divider direction

docs/en/api/ContextMenuInstance.md

@@ -58,7 +58,7 @@ Global Function
 
 | Property | Description | Type | Optional value | Default |
 | :----: | :----: | :----: | :----: | :----: |
-| items | The items for this menu. | `MenuItem[]` | — | — |
+| items | <div style="width:250px">The items for this menu.</div> | `MenuItem[]` | — | — |
 | x | Menu display x position. | `number` | — | `0` |
 | y | Menu display y position. | `number` | — | `0` |
 | xOffset | X-coordinate offset of submenu and parent menu. | `number` | — | `0` |
@@ -73,7 +73,7 @@ Global Function
 | maxWidth | Submenu maximum width (in pixels). | `number` or `string` | — | `600` |
 | adjustPadding | Padding for submenu position adjust. | `{ x: number, y: number }` or `number` | — | `{ x：0, y: 10 }` |
 | adjustPosition | By default, the menu will automatically adjust its position to prevent it overflow the container. If you allow menu overflow containers, you can set this to false. | `boolean` | — | `true` |
-| direction | Set the mian menu pop-up direction relative to coordinates. Default is `'br'`, if `adjustPosition` is true then the menu will determine the pop-up direction based on its distance from the screen edge. | `'br'|'b'|'bl'|'tr'|'t'|'tl'|'l'|'r'` | — | `'br'` |
+| direction | Set the mian menu pop-up direction relative to coordinates. Default is `'br'`, if `adjustPosition` is true then the menu will determine the pop-up direction based on its distance from the screen edge. | `'br' or 'b' or 'bl' or 'tr' or 't' or 'tl' or 'l' or 'r'` | — | `'br'` |
 | ignoreClickClassName | If your element in menu item has this className, click it will ignore event. | `string` | — |
 | clickCloseClassName | If your element in menu item has this className, click it will ignore event and close hole menu. | `string` | — |
 | getContainer | Return the mounted node for MenuRoot. [Guide](../guide/custom-container.en.md) | `HTMLElement` or `(() => HTMLElement)` | — | — |
@@ -83,7 +83,7 @@ Global Function
 
 | Property | Description | Type | Optional value | Default |
 | :----: | :----: | :----: | :----: | :----: |
-| label | The label of menu. | `string` or `VNode` or `((label: string) => VNode)` | — | — |
+| label | <div style="width:300px">The label of menu.</div> | `string` or `VNode` or `((label: string) => VNode)` | — | — |
 | icon | The icon for menu item. | `string` or `VNode` or `((icon: string) => VNode)` | — | — |
 | iconFontClass | Custom icon library font class name. | `string` | — | `iconfont` |
 | preserveIconWidth | Should a fixed-width icon area be reserved for menu items without icon. | `boolean` | - | `true` |
@@ -96,11 +96,11 @@ Global Function
 | adjustSubMenuPosition | By default, the submenu will automatically adjust its position to prevent it overflow the container. If you allow menu overflow containers, you can set this to false. | `boolean` | — | inherit from `MenuOptions.adjustPosition` |
 | clickableWhenHasChildren | When there are subitems in this item, is it allowed to trigger its own click event? | `boolean` | — | `false` |
 | clickClose | Should close menu when Click this menu item ? | `boolean` | — | `true` |
-| divided | Is this menu item separated from the menu item below? | `boolean` | — | `false` |
+| divided | Should show Separator?<ul><li>`true` or `'down'`: Separator is show below menu.</li><li> `'up'`: Separator is show above menu.</li><li> `'self'`: Mark this item is a Separator.</li><li> `false`: No Separator. </li></ul> | `boolean` or `'up'` or `'down'` or `'self'` | — | `false` |`boolean` | — | `false` |
 | customClass | Custom submenu class. | `string` | — | — |
 | minWidth | Submenu minimum width (in pixels). | `number` or `string` | — | `100` |
 | maxWidth | Submenu maximum width (in pixels). | `number` or `string` | — | `600` |
-| direction | Set the submenu pop-up direction relative to coordinates. Default is inherted from `MenuOptions.direction`, if `adjustSubMenuPosition` is true then the submenu will determine the pop-up direction based on its distance from the screen edge. | `'br'|'b'|'bl'|'tr'|'t'|'tl'|'l'|'r'` | — | inherit from `MenuOptions.direction` |
+| direction | Set the submenu pop-up direction relative to coordinates. Default is inherted from `MenuOptions.direction`, if `adjustSubMenuPosition` is true then the submenu will determine the pop-up direction based on its distance from the screen edge. | `'br' or 'b' or 'bl' or 'tr' or 't' or 'tl' or 'l' or 'r'` | — | inherit from `MenuOptions.direction` |
 | onClick | Menu item click event handler. | `Function()` | — | — |
 | onSubMenuClose | This event emit when submenu of this item is closing. | `(() => void)` | — | — |
 | onSubMenuOpen | This event emit when submenu of this item is showing. | `(() => void)` | — | — |

docs/zh/api/ContextMenuInstance.md

@@ -57,7 +57,7 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 
 | 属性 | 描述 | 类型 | 可选值 | 默认值 |
 | :----: | :----: | :----: | :----: | :----: |
-| items | 菜单结构信息 | `MenuItem[]` | — | — |
+| items | <div style="width:200px">菜单结构信息</div> | `MenuItem[]` | — | — |
 | x | 菜单显示X坐标 | `number` | — | `0` |
 | y | 菜单显示Y坐标 | `number` | — | `0` |
 | xOffset | 子菜单与父菜单X的偏移 | `number` | — | `0` |
@@ -83,7 +83,7 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 
 | 属性 | 描述 | 类型 | 可选值 | 默认值 |
 | :----: | :----: | :----: | :----: | :----: |
-| label | 菜单项名称，可传入VNode | `string` or `VNode` or `((label: string) => VNode)` | — | — |
+| label | <div style="width:300px">菜单项名称，可传入VNode</div> | `string` or `VNode` or `((label: string) => VNode)` | — | — |
 | icon | 菜单项图标，可传入VNode | `string` or `VNode` or `((icon: string) => VNode)` | — | — |
 | iconFontClass | 自定义图标字体类名 | `string` | — | `iconfont` |
 | preserveIconWidth | 是否应为没有图标的菜单项保留固定宽度的图标区域 | `boolean` | - | `true` |
@@ -96,11 +96,11 @@ import ContextMenu from '@imengyu/vue3-context-menu'
 | adjustSubMenuPosition | 默认情况下，子菜单将自动调整其位置，以防止溢出容器。如果允许菜单溢出容器，可以将其设置为false | `boolean` | — | 继承自 `MenuOptions.adjustPosition` |
 | clickableWhenHasChildren | 指定当本菜单下有子菜单时，点击当前菜单是否触发点击事件 | `boolean` | — | `false` |
 | clickClose | 点击当前菜单项是否自动关闭整个菜单 | `boolean` | — | `true` |
-| divided | 是否显示分割线 | `boolean` | — | `false` |
+| divided | 是否显示分割线。分割线显示逻辑<ul><li>`true` or `'down'`: 分割线显示在菜单项下方。</li><li> `'up'`: 分割线显示在菜单项上方。</li><li> `'self'`: 把当前菜单项变成分割线。</li><li> `false`: 没有分割线。 </li></ul> | `boolean` or `'up'` or `'down'` or `'self'` | — | `false` |
 | customClass | 自定义子菜单class | `string` | — | — |
 | minWidth | 子菜单最小宽度 | `number` or `string` | — | `100` |
 | maxWidth | 子菜单最大宽度 | `number` or `string` | — | `600` |
-| direction | 设置子菜单的弹出方向。如果 `adjustPosition` 为 `true` ，则菜单会根据可用空间自动调整弹出方向。 | `'br'|'b'|'bl'|'tr'|'t'|'tl'|'l'|'r'` | — | 继承自 `MenuOptions.direction` |
+| direction | 设置子菜单的弹出方向。如果 `adjustPosition` 为 `true` ，则菜单会根据可用空间自动调整弹出方向。 | `'br' or 'b' or 'bl' or 'tr' or 't' or 'tl' or 'l' or 'r'` | — | 继承自 `MenuOptions.direction` |
 | onClick | 菜单项点击事件 | `Function()` | — | — |
 | onSubMenuClose | 子菜单关闭事件回调 | `(() => void)` | — | — |
 | onSubMenuOpen | 子菜单打开事件回调 | `(() => void)` | — | — |

examples/views/BasicUseage.vue

@@ -343,6 +343,35 @@ const menuData = reactive<MenuOptions>({
         },
       ]
     },
+    { 
+      label: 'Test submenu divider',
+      children: [
+        { 
+          label: "Simple", 
+          children: [
+            { label: "Item1 divided down", divided: true },
+            { label: "Item2" },
+            { label: "Item3" },
+          ]
+        },
+        { 
+          label: "Divided up", 
+          children: [
+            { label: "Item1" },
+            { label: "Item2 Divided up", divided: 'up' },
+            { label: "Item3" },
+          ]
+        },
+        { 
+          label: "Divided item", 
+          children: [
+            { label: "Item1" },
+            { divided: 'self' },
+            { label: "Item3" },
+          ]
+        },
+      ]
+    },
     { 
       label: 'Item with icon',
       icon: "icon-reload-1",

src/ContextMenuDefine.ts

@@ -293,9 +293,14 @@ export interface MenuItem {
    */
   clickClose ?: boolean,
   /**
-   * Is this menu item separated from the menu item below?
+   * Is this menu item separated from the menu item?
+   * 
+   * * `true` or `'down'`: Separator is show below menu.
+   * * `'up'`: Separator is show above menu.
+   * * `'self'`: Mark this item is a Separator.
+   * * `false`: No Separator.
    */
-  divided ?: boolean,
+  divided ?: boolean|'up'|'down'|'self',
   /**
    * Custom css class for submenu
    */

src/ContextMenuSeparator.vue

@@ -1,11 +1,23 @@
 <template>
-  <div class="mx-context-menu-item-sperator mx-context-no-clickable"></div>
+  <VNodeRender v-if="globalHasSlot('separatorRender')" :vnode="() => globalRenderSlot('separatorRender', {})" />
+  <div v-else class="mx-context-menu-item-sperator mx-context-no-clickable"></div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, inject } from 'vue'
+import { GlobalHasSlot, GlobalRenderSlot } from './ContextSubMenuWrapper.vue';
 
 export default defineComponent({
   name: 'ContextMenuSperator',
+  setup() {
+      
+    const globalHasSlot = inject('globalHasSlot') as GlobalHasSlot;
+    const globalRenderSlot = inject('globalRenderSlot') as GlobalRenderSlot;
+
+    return {
+      globalHasSlot,
+      globalRenderSlot,
+    };
+  },
 })
 </script>

src/ContextSubMenu.vue

@@ -22,8 +22,11 @@
     >
       <slot>
         <template v-for="(item, i) in items" :key="i" >
+          <ContextMenuSeparator v-if="item.hidden !== true && item.divided === 'up'" />
+          <ContextMenuSeparator v-if="item.hidden !== true && item.divided === 'self'" />
           <!--Menu Item-->
           <ContextMenuItem
+            v-else
             :clickHandler="item.onClick ? (e) => item.onClick!(e) : undefined"
             :disabled="item.disabled"
             :hidden="item.hidden"
@@ -57,8 +60,7 @@
           </ContextMenuItem>
           <!--Separator-->
           <!--Custom render-->
-          <VNodeRender v-if="item.hidden !== true && item.divided && globalHasSlot('separatorRender')" :vnode="() => globalRenderSlot('separatorRender', {})" />
-          <ContextMenuSeparator v-else-if="item.hidden !== true && item.divided" />
+          <ContextMenuSeparator v-if="item.hidden !== true && (item.divided === 'down' || item.divided === true)" />
         </template>
       </slot>
     </div>
@@ -83,10 +85,9 @@
 import { defineComponent, inject, nextTick, onMounted, PropType, provide, ref, toRefs } from 'vue'
 import { MenuOptions, MenuItem, ContextMenuPositionData, MenuConstOptions, MenuPopDirection } from './ContextMenuDefine'
 import { getLeft, getTop, solveNumberOrStringSize } from './ContextMenuUtils'
+import { GlobalHasSlot, GlobalRenderSlot } from './ContextMenu.vue'
 import ContextMenuItem from './ContextMenuItem.vue'
 import ContextMenuSeparator from './ContextMenuSeparator.vue'
-import { VNodeRender } from './ContextMenuUtils'
-import { GlobalHasSlot, GlobalRenderSlot } from './ContextMenu.vue'
 import ContextMenuIconRight from './ContextMenuIconRight.vue'
 
 //The internal info context for menu item
@@ -157,7 +158,6 @@ export default defineComponent({
   components: {
     ContextMenuItem,
     ContextMenuSeparator,
-    VNodeRender,
     ContextMenuIconRight
   },
   props: {