From 0fd31546052378cbd97257486b4196f25af0ed1c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 27 May 2019 11:10:22 +0300
Subject: [PATCH] Implemented menu component

---
 src/AppMenu.vue                          |   3 +-
 src/components/common/Common.css         |  25 --
 src/components/menu/Menu.vue             | 167 ++++++++++++++
 src/components/menu/Menuitem.vue         |  25 ++
 src/components/paginator/Paginator.vue   |   2 +-
 src/main.js                              |   2 +
 src/router.js                            |  10 +
 src/views/menu/MenuDemo.vue              |  79 +++++++
 src/views/menu/MenuDoc.vue               | 281 +++++++++++++++++++++++
 src/views/menumodel/MenuModel.vue        | 142 ++++++++++++
 src/views/splitbutton/SplitButtonDoc.vue |  41 +---
 11 files changed, 710 insertions(+), 67 deletions(-)
 create mode 100644 src/components/menu/Menu.vue
 create mode 100644 src/components/menu/Menuitem.vue
 create mode 100644 src/views/menu/MenuDemo.vue
 create mode 100644 src/views/menu/MenuDoc.vue
 create mode 100644 src/views/menumodel/MenuModel.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 9954c6fa5..a9bc487c2 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -117,7 +117,8 @@
             <transition name="layout-submenu-wrapper">
                 <div v-show="activeMenuIndex === 6">
                     <div>
-                        <router-link to="/">&#9679; Link</router-link>
+                        <router-link to="/menumodel">&#9679; MenuModel</router-link>
+                        <router-link to="/menu">&#9679; Menu</router-link>
                     </div>
                 </div>
             </transition>
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index 5ec13d524..838af60de 100644
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -117,31 +117,6 @@ button {
     transition: transform .3s, opacity .15s;
 }
 
-.p-menu-overlay {
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    opacity: 0;
-    -webkit-transition: transform .3s, opacity .3s;
-    transition: transform .3s, opacity .3s;
-}
-
-.p-menu-overlay-visible {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-    opacity: 1;
-}
-
-.p-menu-overlay-hidden {
-    opacity: 0;
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    -webkit-transition: transform .3s, opacity .15s;
-    transition: transform .3s, opacity .15s;
-}
-
 /* Overlay Animations */
 .p-input-overlay-enter,
 .p-input-overlay-leave-to {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
new file mode 100644
index 000000000..92d1a92a4
--- /dev/null
+++ b/src/components/menu/Menu.vue
@@ -0,0 +1,167 @@
+<template>
+    <transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
+        <div ref="container"  :class="containerClass" v-if="popup ? visible : true">
+            <ul class="p-menu-list p-reset">
+                <template v-for="item of model">
+                    <template v-if="item.items">
+                        <li class="p-submenu-header " :key="item.label" v-if="item.items">{{item.label}}</li>
+                        <Menuitem v-for="child of item.items" :key="child.label" :item="child" @click="itemClick" />
+                    </template>
+                    <template v-else>
+                        <Menuitem :key="item.label" :item="item" @click="itemClick" />
+                    </template>
+                </template>
+            </ul>
+        </div>
+    </transition>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+import Menuitem from './Menuitem';
+
+export default {
+    props: {
+        popup: {
+            type: Boolean,
+            default: false
+        },
+		model: {
+            type: Array,
+            default: null
+        },
+        appendTo: {
+            type: String,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+    },
+    data() {
+        return {
+            visible: false
+        };
+    },
+    target: null,
+    outsideClickListener: null,
+    resizeListener: null,
+    beforeDestroy() {
+        this.restoreAppend();
+        this.unbindResizeListener();
+        if (this.dismissable) {
+            this.unbindOutsideClickListener();
+        }
+        this.target = null;
+    },
+    methods: {
+        itemClick(event) {
+            const item = event.item;
+            if (item.command) {
+                item.command(event);
+            }
+            this.overlayVisible = false;
+        },
+        toggle(event) {
+            if (this.visible)
+                this.hide();
+            else
+                this.show(event);
+        },
+        show(event) {
+            this.visible = true;
+            this.target = event.target;
+        },
+        hide() {
+            this.visible = false;
+        },
+        onEnter() {
+            this.appendContainer();
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+            this.bindResizeListener();
+            
+            if (this.autoZIndex) {
+                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+        },
+        onLeave() {
+            this.unbindOutsideClickListener();
+            this.unbindResizeListener();
+        },
+        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;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.visible) {
+                        this.visible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        isTargetClicked() {
+            return this.target && (this.target === event.target || this.target.contains(event.target));
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.container);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.container);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.container && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.container);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.container);
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-menu p-component', {
+                'p-menu-dynamic p-menu-overlay': this.popup
+            }]
+        }
+    },
+    components: {
+        'Menuitem': Menuitem
+    }
+}
+</script>
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
new file mode 100644
index 000000000..9aba92906
--- /dev/null
+++ b/src/components/menu/Menuitem.vue
@@ -0,0 +1,25 @@
+<template>
+<li class="p-menuitem" role="menuitem">
+    <a :href="item.url||'#'" class="p-menuitem-link" @click="onClick">
+        <span :class="['p-menuitem-icon', item.icon]"></span>
+        <span class="p-menuitem-text">{{item.label}}</span>
+    </a>
+</li>
+</template>
+
+<script>
+export default {
+    props: {
+        item: null
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', {
+                originalEvent: event,
+                item: this.item
+            });
+            event.preventDefault();
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 6229cbd80..725f53cf0 100644
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -3,7 +3,7 @@
         <div class="p-paginator-left-content" v-if="$scopedSlots.left">
             <slot name="left" :state="currentState"></slot>
         </div>
-		<template v-for="item of templateItems">
+		<template v-for="item of templateItems"">
 			<FirstPageLink v-if="item === 'FirstPageLink'" :key="item" @click="changePageToFirst($event)" :disabled="isFirstPage" />
 			<PrevPageLink v-else-if="item === 'PrevPageLink'" :key="item" @click="changePageToPrev($event)" :disabled="isFirstPage" />
 			<NextPageLink v-else-if="item === 'NextPageLink'" :key="item" @click="changePageToNext($event)" :disabled="isLastPage" />
diff --git a/src/main.js b/src/main.js
index 22fd89e84..ccee92b17 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,6 +21,7 @@ import FullCalendar from './components/fullcalendar/FullCalendar';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Listbox from './components/listbox/Listbox';
+import Menu from './components/menu/Menu';
 import Message from './components/message/Message';
 import MultiSelect from './components/multiselect/MultiSelect';
 import OverlayPanel from './components/overlaypanel/OverlayPanel';
@@ -79,6 +80,7 @@ Vue.component('FullCalendar', FullCalendar);
 Vue.component('InputSwitch', InputSwitch);
 Vue.component('InputText', InputText);
 Vue.component('Listbox', Listbox);
+Vue.component('Menu', Menu);
 Vue.component('Message', Message);
 Vue.component('MultiSelect', MultiSelect);
 Vue.component('OverlayPanel', OverlayPanel);
diff --git a/src/router.js b/src/router.js
index 45e906ce7..4555d43b8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -160,6 +160,16 @@ export default new Router({
 			path: '/listbox',
 			name: 'listbox',
 			component: () => import('./views/listbox/ListboxDemo.vue')
+        },
+        {
+			path: '/menu',
+			name: 'menu',
+			component: () => import('./views/menu/MenuDemo.vue')
+        },
+        {
+			path: '/menumodel',
+			name: 'menumodel',
+			component: () => import('./views/menumodel/MenuModel.vue')
 		},
 		{
 			path: '/message',
diff --git a/src/views/menu/MenuDemo.vue b/src/views/menu/MenuDemo.vue
new file mode 100644
index 000000000..b3ea02c5b
--- /dev/null
+++ b/src/views/menu/MenuDemo.vue
@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Menu</h1>
+                <p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Inline</h3>
+            <Menu :model="items" />
+
+            <h3>Overlay</h3>
+            <Button type="button" label="Toggle" @click="toggle" />
+            <Menu ref="menu" :model="items" :popup="true" />
+        </div>
+
+        <MenuDoc />
+    </div>
+</template>
+
+<script>
+import MenuDoc from './MenuDoc';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [{
+                        label: 'Update', 
+                        icon: 'pi pi-refresh', 
+                        command: () => {
+                            this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                        }
+                    },
+                    {
+                        label: 'Delete', 
+                        icon: 'pi pi-times',
+                        command: () => {
+                            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                        }
+                    }
+                ]},
+                {
+                    label: 'Navigate',
+                    items: [{
+                        label: 'Vue Website', 
+                        icon: 'pi pi-external-link',
+                        command: () => {
+                            window.location.href = 'https://vuejs.org/'
+                        }
+                    },
+                    {   
+                        label: 'Upload', 
+                        icon: 'pi pi-upload', 
+                        command: () => {
+                            window.location.hash = "/fileupload"
+                        }
+                    }
+                ]}
+            ]
+        } 
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
+    },
+    components: {
+        'MenuDoc': MenuDoc
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
new file mode 100644
index 000000000..59888cb18
--- /dev/null
+++ b/src/views/menu/MenuDoc.vue
@@ -0,0 +1,281 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Menu from 'primevue/menu';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Menu requires a collection of menuitems as its model.</p>
+<CodeHighlight>
+&lt;Menu :model="items" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+export default {
+	data() {
+		return {
+			items: [
+				{
+					label: 'Update',
+					icon: 'pi pi-refresh',
+					command: () => {
+						this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+					}
+				},
+				{
+					label: 'Delete',
+					icon: 'pi pi-times',
+					command: () => {
+						this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+					}
+				},
+				{
+					label: 'Vue Website',
+					icon: 'pi pi-external-link',
+					command: () => {
+						window.location.href = 'https://vuejs.org/'
+					}
+				},
+				{
+					label: 'Upload',
+					icon: 'pi pi-upload',
+					command: () => {
+						window.location.hash = "/fileupload"
+					}
+				}
+			]
+		}
+	}
+}
+</CodeHighlight>
+
+                <h3>MenuModel</h3>
+                <p>Menu uses the common MenuModel API to define the items, visit <router-link to="/theming">MenuModel API</router-link> for details.</p>
+
+                <h3>SubMenus</h3>
+                <p>Menu supports one level of nesting via subitems of an item.</p>
+<CodeHighlight lang="js">
+let items: [
+    {
+        label: 'Options',
+        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
+                {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'} ]
+    }
+]
+</CodeHighlight>
+
+                <h3>Popup Mode</h3>
+                <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
+
+<CodeHighlight>
+&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
+&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
+</CodeHighlight>
+                
+                <h3>Properties</h3>
+                <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>   
+                            <tr>
+                                <td>model</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>An array of menuitems.</td>
+                            </tr>
+                            <tr>
+                                <td>popup</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines if menu would displayed as a popup.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>DOM element instance where the dialog should be mounted.</td>
+                            </tr>
+                            <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
+                            </tr>
+                            <tr>
+                                <td>autoZIndex</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to automatically manage layering.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Methods</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>toggle</td>
+                                <td>event: Browser event</td>
+                                <td>Toggles the visiblity of the overlay.</td>
+                            </tr>
+                            <tr>
+                                <td>show</td>
+                                <td>event: Browser event <br />
+                                    target: Optional target if event.target would not be used</td>
+                                <td>Shows the overlay.</td>
+                            </tr>
+                            <tr>
+                                <td>hide</td>
+                                <td>-</td>
+                                <td>Hides the overlay.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </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>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;Menu&lt;/h1&gt;
+            &lt;p&gt;Menu is a navigation / command component that supports dynamic and static positioning..&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="content-section implementation"&gt;
+        &lt;h3 class="first"&gt;Inline&lt;/h3&gt;
+        &lt;Menu :model="items" /&gt;
+
+        &lt;h3&gt;Overlay&lt;/h3&gt;
+        &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
+        &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [{
+                        label: 'Update', 
+                        icon: 'pi pi-refresh', 
+                        command: () => {
+                            this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
+                        }
+                    },
+                    {
+                        label: 'Delete', 
+                        icon: 'pi pi-times',
+                        command: () => {
+                            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
+                        }
+                    }
+                ]},
+                {
+                    label: 'Navigate',
+                    items: [{
+                        label: 'Vue Website', 
+                        icon: 'pi pi-external-link',
+                        command: () => {
+                            window.location.href = 'https://vuejs.org/'
+                        }
+                    },
+                    {   
+                        label: 'Upload', 
+                        icon: 'pi pi-upload', 
+                        command: () => {
+                            window.location.hash = "/fileupload"
+                        }
+                    }
+                ]}
+            ]
+        } 
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        },
+        save() {
+            this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
new file mode 100644
index 000000000..1d533378c
--- /dev/null
+++ b/src/views/menumodel/MenuModel.vue
@@ -0,0 +1,142 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>MenuModel</h1>
+                <p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
+            </div>
+        </div>
+
+        <div class="content-section documentation">
+            <h3 style="margin-top:0">MenuItem</h3>
+                <p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
+<CodeHighlight lang="js">
+const items: [
+    {
+        label: 'Options',
+        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
+                {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'} ]
+    }
+]
+                </CodeHighlight>
+
+                <p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
+
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>label</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Text of the item.</td>
+                            </tr>
+                            <tr>
+                                <td>icon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the item.</td>
+                            </tr>
+                            <tr>
+                                <td>command</td>
+                                <td>function</td>
+                                <td>null</td>
+                                <td>Callback to execute when item is clicked.</td>
+                            </tr>
+                            <tr>
+                                <td>url</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>External link to navigate when item is clicked.</td>
+                            </tr>
+                            <tr>
+                                <td>items</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>An array of children menuitems.</td>
+                            </tr>
+                            <tr>
+                                <td>disabled</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When set as true, disables the menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>target</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Specifies where to open the linked document.</td>
+                            </tr>
+                            <tr>
+                                <td>separator</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Defines the item as a separator.</td>
+                            </tr>
+                            <tr>
+                                <td>style</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Inline style of the menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>class</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the menuitem.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h3>Command</h3>
+                <p>The function to invoke when an item is clicked is defined using the command property.</p>
+<CodeHighlight lang="js">
+const items = [
+    {
+        label: 'New', 
+        icon: 'pi pi-plus', 
+        command: (event) => {
+            // event.originalEvent: Browser event
+            // event.item: Menuitem instance
+        }
+    }
+];
+</CodeHighlight>
+
+                <h3>Navigation</h3>
+                <p>Navigation is specified using url property for external links or using command function for internal router.</p>
+<CodeHighlight lang="js">
+const items = [
+    {
+        label: 'New', 
+        icon: 'pi pi-plus', 
+        command: (event) => {
+            window.location.hash = "/fileupload";
+        }
+    },
+    {
+        label: 'Link', 
+        icon: 'pi pi-check',
+        url: 'https://www.primefaces.org/primereact'
+    }
+];
+</CodeHighlight>
+        </div>        
+    </div>
+</template>
+
+<script>
\ No newline at end of file
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index 3fb662348..c59c5ecad 100644
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -53,46 +53,7 @@ export default {
 </CodeHighlight>
 
                 <h3>MenuModel</h3>
-                <p>SplitButton items are based on the PrimeVue MenuModel API.</p>
-                
-                <div class="doc-tablewrapper">
-					<table class="doc-table">
-						<thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-						</thead>
-						<tbody>
-                            <tr>
-                                <td>label</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Text of the menuitem.</td>
-                            </tr>
-                            <tr>
-                                <td>icon</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Icon of the menuitem.</td>
-                            </tr>
-                            <tr>
-                                <td>url</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>External link to navigate when item is clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>command</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Callback to execute when item is selected.</td>
-                            </tr>
-						</tbody>
-					</table>
-				</div>
+                <p>SplitButton uses the common MenuModel API to define the items, visit <router-link to="/theming">MenuModel API</router-link> for details.
 
 				<h3>Severity</h3>
 				<p>Different color options are available as severity levels.</p>