Implemented TabMenu component

exports/tabmenu.d.ts

@@ -0,0 +1 @@
+export * from './components/tabmenu/TabMenu';

exports/tabmenu.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/tabmenu/TabMenu.vue');
+            

src/AppMenu.vue

@@ -132,6 +132,7 @@
                         <router-link to="/megamenu">&#9679; MegaMenu</router-link>
                         <router-link to="/menu">&#9679; Menu</router-link>
                         <router-link to="/menubar">&#9679; Menubar</router-link>
+                        <router-link to="/tabmenu">&#9679; TabMenu</router-link>
                         <router-link to="/tieredmenu">&#9679; TieredMenu</router-link>
                     </div>
                 </div>

src/components/tabmenu/TabMenu.d.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export declare class TabMenu extends Vue {
+    model?: any[];
+}

src/components/tabmenu/TabMenu.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="p-tabmenu p-component">
+        <ul class="p-tabmenu-nav p-reset" role="tablist">
+            <template v-for="(item,i) of model">
+                <li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false">
+                    <router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
+                        <span :class="getItemIcon(item)" v-if="item.icon"></span>
+                        <span class="p-menuitem-text">{{item.label}}</span>
+                    </router-link>
+                    <a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)">
+                        <span :class="getItemIcon(item)" v-if="item.icon"></span>
+                        <span class="p-menuitem-text">{{item.label}}</span>
+                    </a>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+		model: {
+            type: Array,
+            default: null
+        }
+    },
+    data() {
+        return {
+            visible: false
+        };
+    },
+    methods: {
+        onItemClick(event, item) {
+            if (item.disabled) {
+                event.preventDefault();
+                return;
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+        },
+        getItemClass(item) {
+            return ['p-tabmenuitem', item.class, {'p-highlight': this.activeRoute === item.to, 'p-disabled': item.disabled}];
+        },
+        getItemIcon(item) {
+            return ['p-menuitem-icon', item.icon];
+        }
+    },
+    computed: {
+        activeRoute() {
+            return this.$route.path;
+        }
+    }
+}
+</script>
+
+<style>
+/** TabMenu **/
+.p-tabmenu .p-tabmenu-nav {
+    margin: 0;
+    padding: .25em .5em 0 .25em;
+}
+
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    list-style: none;
+    float: left;
+    position: relative;
+    margin: 0 .2em 1px 0;
+    padding: 0;
+    white-space: nowrap;
+    display: block;
+    border-bottom: 0;
+    top: 1px;
+}
+
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem a {
+    float: left;
+    padding: 0.5em 1em;
+    text-decoration: none;
+}
+
+.p-tabmenu .p-tabmenu-nav a {
+    padding: 0.5em 1em;
+}
+
+.p-tabmenu .p-menuitem-icon  {
+    margin-right: .25em;
+    vertical-align: middle;
+}
+
+.p-tabmenu .p-menuitem-text  {
+    vertical-align: middle;
+}
+
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-disabled a {
+     cursor: default;
+}
+</style>

src/main.js

@@ -51,6 +51,7 @@ import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import SplitButton from './components/splitbutton/SplitButton';
 import Spinner from './components/spinner/Spinner';
+import TabMenu from './components/tabmenu/TabMenu';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabpanel/TabPanel';
 import Textarea from './components/textarea/Textarea';
@@ -131,6 +132,7 @@ Vue.component('Spinner', Spinner);
 Vue.component('SplitButton', SplitButton);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
+Vue.component('TabMenu', TabMenu);
 Vue.component('Textarea', Textarea);
 Vue.component('TieredMenu', TieredMenu);
 Vue.component('Toast', Toast);

src/router.js

@@ -410,6 +410,31 @@ export default new Router({
 			path: '/textarea',
 			name: 'textarea',
 			component: () => import('./views/textarea/TextareaDemo.vue')
+        },
+        {
+			path: '/tabmenu',
+			name: 'tabmenu',
+            component: () => import('./views/tabmenu/TabMenuDemo.vue'),
+            children: [{
+                path: '',
+                component: () => import('./views/tabmenu/HomeDemo.vue')
+            },
+            {
+                path: '/tabmenu/calendar',
+                component: () => import('./views/tabmenu/CalendarDemo.vue')
+            },
+            {
+                path: '/tabmenu/edit',
+                component: () => import('./views/tabmenu/EditDemo.vue')
+            },
+            {
+                path: '/tabmenu/documentation',
+                component: () => import('./views/tabmenu/DocumentationDemo.vue')
+            },
+            {
+                path: '/tabmenu/settings',
+                component: () => import('./views/tabmenu/SettingsDemo.vue')
+            }]
         },
 		{
 			path: '/tabview',

src/views/tabmenu/CalendarDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="tabmenudemo-content">
+        <i class="pi pi-fw pi-calendar" style="font-size: 3em" />
+        <h1>Calendar Component Content</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/views/tabmenu/DocumentationDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="tabmenudemo-content">
+        <i class="pi pi-fw pi-file" style="font-size: 3em" />
+        <h1>Documentation Component Content</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/views/tabmenu/EditDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="tabmenudemo-content">
+        <i class="pi pi-fw pi-pencil" style="font-size: 3em" />
+        <h1>Edit Component Content</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/views/tabmenu/HomeDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="tabmenudemo-content">
+        <i class="pi pi-fw pi-home" style="font-size: 3em" />
+        <h1>Home Component Content</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/views/tabmenu/SettingsDemo.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="tabmenudemo-content">
+        <i class="pi pi-fw pi-cog" style="font-size: 3em" />
+        <h1>Settings Component Content</h1>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/views/tabmenu/TabMenuDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TabMenu</h1>
+                <p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <TabMenu :model="items" />
+            <router-view/>
+        </div>
+
+        <TabMenuDoc />
+    </div>
+</template>
+
+<script>
+import TabMenuDoc from './TabMenuDoc';
+
+export default {
+    data() {
+        return {
+            items: [
+                {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu/'},
+                {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
+                {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
+                {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
+                {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
+            ]
+        }
+    },
+    components: {
+        'TabMenuDoc': TabMenuDoc
+	}
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .tabmenudemo-content  {
+    h1 {
+        font-weight: 400;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    i {
+        vertical-align: middle;
+    }
+}
+
+</style>

src/views/tabmenu/TabMenuDoc.vue

@@ -0,0 +1,131 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import TabMenu from 'primevue/tabmenu';
+</CodeHighlight>
+
+                <h3>MenuModel</h3>
+                <p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
+
+				<h3>Getting Started</h3>
+				<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
+<CodeHighlight>
+&lt;Menu :model="items" /&gt;
+&lt;router-view /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+export default {
+	data() {
+		return {
+			items: [
+                {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu/'},
+                {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
+                {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
+                {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
+                {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
+            ]
+		}
+	}
+}
+</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>
+						</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-tabmenu</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-tabmenu-nav</td>
+                                <td>List element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-tabmenuitem</td>
+                                <td>Menuitem element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-highlight</td>
+                                <td>Active menuitem element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-icon</td>
+                                <td>Icon of a menuitem.</td>
+                            </tr>
+                            <tr>
+                                <td>p-menuitem-text</td>
+                                <td>Text 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/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;Menu :model="items" /&gt;
+&lt;router-view /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            items: [
+                {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu/'},
+                {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
+                {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
+                {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
+                {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
+            ]
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>