From 38a411e2e9ac70fe5b1b0a4a1f1194c8ce822efe Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 2 Dec 2019 14:02:01 +0300
Subject: [PATCH] Refactored and applied fixes to Menu component

---
 src/components/menu/Menu.vue      | 23 ++++-----
 src/components/menu/Menuitem.vue  | 17 ++++---
 src/views/menu/MenuDemo.vue       | 10 ++--
 src/views/menu/MenuDoc.vue        | 80 +++++++++++++++----------------
 src/views/menumodel/MenuModel.vue | 26 +++++-----
 5 files changed, 76 insertions(+), 80 deletions(-)

diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 5a7586330..96f179ffc 100644
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -1,10 +1,10 @@
 <template>
     <transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
-        <div ref="container"  :class="containerClass" v-if="popup ? visible : true">
+        <div ref="container" :class="containerClass" v-if="popup ? visible : true">
             <ul class="p-menu-list p-reset" role="menu">
                 <template v-for="(item, i) of model">
-                    <template v-if="item.items">
-                        <li class="p-submenu-header " :key="item.label+i" v-if="item.items">{{item.label}}</li>
+                    <template v-if="item.items && item.visible !== false">
+                        <li class="p-submenu-header" :key="item.label+i" v-if="item.items">{{item.label}}</li>
                         <Menuitem v-for="(child, j) of item.items" :key="child.label+i+j" :item="child" @click="itemClick" />
                     </template>
                     <template v-else>
@@ -41,7 +41,7 @@ export default {
         baseZIndex: {
             type: Number,
             default: 0
-        },
+        }
     },
     data() {
         return {
@@ -54,9 +54,7 @@ export default {
     beforeDestroy() {
         this.restoreAppend();
         this.unbindResizeListener();
-        if (this.dismissable) {
-            this.unbindOutsideClickListener();
-        }
+        this.unbindOutsideClickListener();
         this.target = null;
     },
     methods: {
@@ -64,8 +62,9 @@ export default {
             const item = event.item;
             if (item.command) {
                 item.command(event);
+                event.originalEvent.preventDefault();
             }
-            this.overlayVisible = false;
+            this.hide();
         },
         toggle(event) {
             if (this.visible)
@@ -96,16 +95,12 @@ export default {
         },
         alignOverlay() {
             DomHandler.absolutePosition(this.$refs.container, this.target);
-
-            if (DomHandler.getOffset(this.$refs.container).top < DomHandler.getOffset(this.target).top) {
-                DomHandler.addClass(this.$refs.container, 'p-overlaypanel-flipped');
-            }
         },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
-                        this.visible = false;
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
@@ -121,7 +116,7 @@ export default {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
                     if (this.visible) {
-                        this.visible = false;
+                        this.hide();
                     }
                 };
                 window.addEventListener('resize', this.resizeListener);
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 24ca55004..e259cfc81 100644
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -1,10 +1,14 @@
 <template>
-<li :class="containerClass" role="menuitem" :style="item.style">
-    <a :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
-        <span :class="['p-menuitem-icon', item.icon]"></span>
-        <span class="p-menuitem-text">{{item.label}}</span>
-    </a>
-</li>
+    <li :class="containerClass" role="menuitem" :style="item.style" v-if="item.visible !== false">
+        <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
+            <span :class="['p-menuitem-icon', item.icon]"></span>
+            <span class="p-menuitem-text">{{item.label}}</span>
+        </router-link>
+        <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
+            <span :class="['p-menuitem-icon', item.icon]"></span>
+            <span class="p-menuitem-text">{{item.label}}</span>
+        </a>
+    </li>
 </template>
 
 <script>
@@ -18,7 +22,6 @@ export default {
                 originalEvent: event,
                 item: this.item
             });
-            event.preventDefault();
         }
     },
     computed: {
diff --git a/src/views/menu/MenuDemo.vue b/src/views/menu/MenuDemo.vue
index 07507b82f..5eb02a7e5 100644
--- a/src/views/menu/MenuDemo.vue
+++ b/src/views/menu/MenuDemo.vue
@@ -49,16 +49,12 @@ export default {
                     items: [{
                         label: 'Vue Website',
                         icon: 'pi pi-external-link',
-                        command: () => {
-                            window.location.href = 'https://vuejs.org/'
-                        }
+                        url: 'https://vuejs.org/'
                     },
                     {
-                        label: 'Upload',
+                        label: 'Router',
                         icon: 'pi pi-upload',
-                        command: () => {
-                            window.location.hash = "/fileupload"
-                        }
+                        to: '/fileupload'
                     }
                 ]}
             ]
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index e57f9da1e..dfcd372e8 100644
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -35,17 +35,13 @@ export default {
 				{
 					label: 'Vue Website',
 					icon: 'pi pi-external-link',
-					command: () => {
-						window.location.href = 'https://vuejs.org/'
-					}
+					url: 'https://vuejs.org/'
 				},
 				{
-					label: 'Upload',
-					icon: 'pi pi-upload',
-					command: () => {
-						window.location.hash = "/fileupload"
-					}
-				}
+                    label: 'Router',
+                    icon: 'pi pi-upload',
+                    to: '/fileupload'
+                }
 			]
 		}
 	}
@@ -58,18 +54,18 @@ export default {
                 <h3>SubMenus</h3>
                 <p>Menu supports one level of nesting via subitems of an item.</p>
 <CodeHighlight lang="js">
-let items: [
+const items: [
     {
         label: 'Options',
-        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
+        items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
                 {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
     },
     {
         label: 'Account',
-        items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
-                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
+        items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
+                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
     }
-]
+];
 </CodeHighlight>
 
                 <h3>Popup Mode</h3>
@@ -78,6 +74,12 @@ let items: [
 <CodeHighlight>
 &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
 &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+toggle(event) {
+    this.$refs.menu.toggle(event);
+}
 </CodeHighlight>
 
                 <h3>Properties</h3>
@@ -169,26 +171,26 @@ let items: [
                             </tr>
 						</thead>
 						<tbody>
-						<tr>
-                            <td>p-menu</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menu-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem</td>
-                            <td>Menuitem element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-text</td>
-                            <td>Label of a menuitem.</td>
-                        </tr>
-                        <tr>
-                            <td>p-menuitem-icon</td>
-                            <td>Icon of a menuitem.</td>
-                        </tr>
+                            <tr>
+                                <td>p-menu</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menu-list</td>
+                                <td>List element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem</td>
+                                <td>Menuitem element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-text</td>
+                                <td>Label of a menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-icon</td>
+                                <td>Icon of a menuitem.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -239,16 +241,12 @@ export default {
                     items: [{
                         label: 'Vue Website',
                         icon: 'pi pi-external-link',
-                        command: () => {
-                            window.location.href = 'https://vuejs.org/'
-                        }
+                        url: 'https://vuejs.org/'
                     },
                     {
-                        label: 'Upload',
+                        label: 'Router',
                         icon: 'pi pi-upload',
-                        command: () => {
-                            window.location.hash = "/fileupload"
-                        }
+                        to: '/fileupload'
                     }
                 ]}
             ]
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
index 2a5163992..3f969217e 100644
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@@ -14,15 +14,15 @@
 const items: [
     {
         label: 'Options',
-        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
+        items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
                 {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
     },
     {
         label: 'Account',
-        items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
-                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
+        items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
+                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
     }
-]
+];
                 </CodeHighlight>
 
                 <p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
@@ -50,6 +50,12 @@ const items: [
                                 <td>null</td>
                                 <td>Icon of the item.</td>
                             </tr>
+                            <tr>
+                                <td>to</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Path of the route.</td>
+                            </tr>
                             <tr>
                                 <td>command</td>
                                 <td>function</td>
@@ -118,20 +124,18 @@ const items = [
 </CodeHighlight>
 
                 <h3>Navigation</h3>
-                <p>Navigation is specified using url property for external links or using command function for internal router.</p>
+                <p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
 <CodeHighlight lang="js">
 const items = [
     {
-        label: 'New',
+        label: 'Internal',
         icon: 'pi pi-plus',
-        command: (event) => {
-            window.location.hash = "/fileupload";
-        }
+        to: '/fileupload'
     },
     {
-        label: 'Link',
+        label: 'External',
         icon: 'pi pi-check',
-        url: 'https://www.primefaces.org/primereact'
+        url: 'https://www.primefaces.org/primevue'
     }
 ];
 </CodeHighlight>