Add user customized menu id mid

src/components/HelloWorld.vue

@@ -86,7 +86,7 @@ export default defineComponent({
   },
   setup() {
     const selected = (data: SelectedItemModel) => {
-      alert(data.name + " _ " + data.path);
+      alert(data.mid + ": " + data.name + " | " + data.path);
     };
 
     const style = computed(() => ({
@@ -105,39 +105,44 @@ export default defineComponent({
       count: 0,
       items: [
         {
-          name: "file",
+          mid: "file",
+          name: "File",
           menu: [
-            { name: "New File", iconSlot: "file" },
-            { name: "New Window", iconSlot: "window" },
-            { name: "Open File", iconSlot: "folderopen" },
+            { mid: "new_file", name: "New File", iconSlot: "file" },
+            { mid: "new_win", name: "New Window", iconSlot: "window" },
+            { mid: "open_file", name: "Open File", iconSlot: "folderopen" },
             { isDivider: true },
             {
+              mid: "pref",
               name: "Preferences",
               iconSlot: "cog",
               menu: [
-                { name: "Settings", iconSlot: "hammer" },
+                { mid: "open_settings", name: "Settings", iconSlot: "hammer" },
                 {
+                  mid: "themes",
                   name: "Themes",
                   iconSlot: "brush",
                   menu: [
                     {
+                      mid: "set_theme_white",
                       name: "White",
                       menu: [{ name: "white 1" }, { name: "white 2" }],
                     },
                     {
+                      mid: "set_theme_black",
                       name: "Black",
                     },
                   ],
                 },
               ],
             },
-            { name: "Open Workspace", iconSlot: "brief" },
+            { mid: "open_ws", name: "Open Workspace", iconSlot: "brief" },
             { isDivider: true },
-            { name: "Save", disable: true, iconSlot: "save" },
-            { name: "Save As...", iconSlot: "save" },
+            { mid: "save_space", name: "Save", disable: true, iconSlot: "save" },
+            { mid: "save_as", name: "Save As...", iconSlot: "save" },
             { isDivider: true },
-            { name: "Close", iconSlot: "times" },
-            { name: "Exit", iconSlot: "signout" },
+            { mid: "close_ws", name: "Close", iconSlot: "times" },
+            { mid: "exit_ws", name: "Exit", iconSlot: "signout" },
           ],
         },
         {

src/components/Menu.vue

@@ -42,6 +42,7 @@
         @click="
           handleSelection({
             event: $event,
+            mid: item.mid,
             name: item.name,
             isParent: !!item.menu,
             disable: item.disable,
@@ -50,6 +51,7 @@
         @touchend="
           handleSelection({
             event: $event,
+            mid: item.mid,
             name: item.name,
             isParent: !!item.menu,
             disable: item.disable,
@@ -193,9 +195,10 @@ export default defineComponent({
         return;
       }
 
-      const { path, name } = selectedItem;
+      const { mid, path, name } = selectedItem;
 
       props.onSelected({
+        mid,
         name,
         path: `${props.parent}>${path ? path : name}`.toLowerCase(),
       });
@@ -208,12 +211,20 @@ export default defineComponent({
     }));
 
     const menuItems = ref(
-      props.items.map((item) =>
-        Object.assign({}, item, {
+      props.items.map((item) => {
+        let _item = Object.assign({}, item, {
           id: Math.random().toString(16).slice(2),
           showSubMenu: false,
-        })
-      )
+        });
+
+        if ('mid' in item) {
+          return _item;
+        } else {
+          return Object.assign({}, _item, {
+            mid: _item.id,
+          });
+        }
+      })
     );
 
     const menuItemsLen = computed(() => menuItems.value.length);
@@ -308,6 +319,7 @@ export default defineComponent({
           });
         } else if (menuItem) {
           props.onSelected({
+            mid: menuItem.mid,
             name: menuItem.name as string,
             path: `${props.parent}>${menuItem.name}`.toLowerCase(),
           });

src/models/MenuItemModel.ts

@@ -1,6 +1,7 @@
 export interface MenuItemModel {
   name?: string;
   id?: string;
+  mid?: string;
   onSelected?: (id: string) => void;
   menu?: MenuItemModel[];
   disable?: boolean;

src/models/SelectedItemModel.ts

@@ -1,4 +1,5 @@
 export interface SelectedItemModel {
+  mid: string;
   name: string;
   path: string;
   event: MouseEvent | KeyboardEvent;