Initiated Steps Component

exports/steps.d.ts

@@ -0,0 +1 @@
+export * from './components/steps/Steps';

exports/steps.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/steps/Steps.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="/steps">&#9679; Steps</router-link>
                         <router-link to="/tabmenu">&#9679; TabMenu</router-link>
                         <router-link to="/tieredmenu">&#9679; TieredMenu</router-link>
                     </div>

src/assets/styles/app.scss

@@ -68,7 +68,7 @@ body {
 }
 
 .layout-topbar {
-    background-color: #ffffff;
+    background-color: #20272a;
     display: block;
     padding: 0;
     height: 70px;
@@ -132,7 +132,7 @@ body {
 
             > a {
                 text-decoration: none;
-                color: #484848;
+                color: #ffffff;
                 min-width: 120px;
                 font-size: 16px;
                 display: inline-block;
@@ -143,7 +143,7 @@ body {
                 @include transition(background-color .2s);
 
                 &:hover {
-                    background-color: #eeeeee;
+                    background-color: #4a4f52;
                 }
 
                 &:focus {
@@ -498,7 +498,6 @@ body {
 
         &.content-submenu {
             background-color: #20272a;
-            border-bottom: 1px solid #1b81d7;
             padding: 15px 30px;
             @include clearfix();
 

src/components/steps/Steps.d.ts

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

src/components/steps/Steps.vue

@@ -0,0 +1,91 @@
+<template>
+    <div :class="containerClass">
+        Steps
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+		model: {
+            type: Array,
+            default: null
+        },
+        readonly: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+
+    },
+    computed: {
+        activeRoute() {
+            return this.$route.path;
+        },
+        containerClass() {
+            return ['p-steps p-component', {'p-steps-readonly': this.readonly}];
+        }
+    }
+}
+</script>
+
+<style>
+.p-steps ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.p-steps ul:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.p-steps .p-steps-item {
+    float: left;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.p-steps.p-steps-readonly .p-steps-item {
+    cursor: auto;
+}
+
+.p-steps .p-steps-item .p-menuitem-link {
+    text-decoration: none;
+    display: block;
+    padding: 1em;
+    position: relative;
+    text-align: center;
+}
+
+.p-steps .p-steps-item.p-steps-current .p-menuitem-link,
+.p-steps .p-steps-item.p-disabled .p-menuitem-link {
+    cursor: default;
+}
+
+.p-steps .p-steps-number {
+    font-size: 2em;
+    display: block;
+}
+
+.p-steps .p-steps-title {
+    display: block;
+    white-space: nowrap;
+}
+
+@media (max-width: 40em) {
+    .p-steps .p-steps-item .p-menuitem-link {
+        padding: 0.5em;
+    }
+
+    .p-steps .p-steps-item .p-steps-title {
+        display: none;
+    }
+}
+.p-steps .p-steps-item {
+     width: 25%;
+ }
+</style>

src/components/tabmenu/TabMenu.vue

@@ -25,11 +25,6 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            visible: false
-        };
-    },
     methods: {
         onItemClick(event, item) {
             if (item.disabled) {

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 Steps from './components/steps/Steps';
 import TabMenu from './components/tabmenu/TabMenu';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabpanel/TabPanel';
@@ -130,6 +131,7 @@ Vue.component('Slider', Slider);
 Vue.component('Sidebar', Sidebar);
 Vue.component('Spinner', Spinner);
 Vue.component('SplitButton', SplitButton);
+Vue.component('Steps', Steps);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
 Vue.component('TabMenu', TabMenu);

src/router.js

@@ -405,7 +405,28 @@ export default new Router({
 			path: '/splitbutton',
 			name: 'splitbutton',
 			component: () => import('./views/splitbutton/SplitButtonDemo.vue')
-		},
+        },
+        {
+			path: '/steps',
+			name: 'steps',
+            component: () => import('./views/steps/StepsDemo.vue'),
+            children: [{
+                path: '',
+                component: () => import('./views/steps/PersonalDemo.vue')
+            },
+            {
+                path: '/steps/seat',
+                component: () => import('./views/steps/SeatDemo.vue')
+            },
+            {
+                path: '/steps/payment',
+                component: () => import('./views/steps/PaymentDemo.vue')
+            },
+            {
+                path: '/steps/confirmation',
+                component: () => import('./views/steps/ConfirmationDemo.vue')
+            }]
+        },
 		{
 			path: '/textarea',
 			name: 'textarea',

src/views/steps/ConfirmationDemo.vue

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

src/views/steps/PaymentDemo.vue

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

src/views/steps/PersonalDemo.vue

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

src/views/steps/SeatDemo.vue

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

src/views/steps/StepsDemo.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Steps</h1>
+                <p>Steps components is an indicator for the steps in a workflow.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Steps :model="items" />
+            <router-view/>
+        </div>
+
+        <StepsDoc />
+    </div>
+</template>
+
+<script>
+import StepsDoc from './StepsDoc';
+
+export default {
+    data() {
+        return {
+            items: [{
+                label: 'Personal',
+                to: '/steps',
+                command: (event) => {
+                    this.$toast.add({severity:'info', summary:'First Step', detail: event.item.label});
+                }
+            },
+            {
+                label: 'Seat',
+                to: '/steps/seat',
+                command: (event) => {
+                    this.$toast.add({severity:'info', summary:'Second Step', detail: event.item.label});
+                }
+            },
+            {
+                label: 'Payment',
+                to: '/steps/payment',
+                command: (event) => {
+                    this.$toast.add({severity:'info', summary:'Third Step', detail: event.item.label});
+                }
+            },
+            {
+                label: 'Confirmation',
+                to: '/steps/confirmation',
+                command: (event) => {
+                    this.$toast.add({severity:'info', summary:'Last Step', detail: event.item.label});
+                }
+            }]
+        }
+    },
+    components: {
+        'StepsDoc': StepsDoc
+	}
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .stepsdemo-content  {
+    h1 {
+        font-weight: 400;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    i {
+        vertical-align: middle;
+    }
+}
+</style>

src/views/steps/StepsDoc.vue

@@ -0,0 +1,131 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Steps from 'primevue/steps';
+</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>