Initiated Steps Component

src/components/steps/Steps.vue

@@ -1,6 +1,13 @@
 <template>
     <div :class="containerClass">
-        Steps
+        <ul role="tablist">
+            <li v-for="(item,index) of model" :key="item.to" :class="getItemClass(item)" :style="item.style">
+                <router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
+                    <span class="p-steps-number">{{index + 1}}</span>
+                    <span class="p-steps-title">{{item.label}}</span>
+                </router-link>
+            </li>
+        </ul>
     </div>
 </template>
 
@@ -17,7 +24,25 @@ export default {
         }
     },
     methods: {
+        onItemClick(event, item) {
+            if (item.disabled || this.readonly) {
+                event.preventDefault();
+                return;
+            }
 
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+        },
+        getItemClass(item) {
+            return ['p-steps-item', item.class, {
+                'p-highlight p-steps-current': (this.activeRoute === item.to),
+                'p-disabled': (item.disabled || (this.activeRoute !== item.to && this.readonly))
+            }];
+        }
     },
     computed: {
         activeRoute() {
@@ -45,8 +70,6 @@ export default {
 
 .p-steps .p-steps-item {
     float: left;
-    box-sizing: border-box;
-    cursor: pointer;
 }
 
 .p-steps.p-steps-readonly .p-steps-item {

src/views/steps/ConfirmationDemo.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-check" style="font-size: 3em" />
+        <i class="pi pi-fw pi-check" />
         <h1>Confirmation Component Content</h1>
     </div>
 </template>

src/views/steps/PaymentDemo.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-money-bill" style="font-size: 3em" />
+        <i class="pi pi-fw pi-money-bill" />
         <h1>Payment Component Content</h1>
     </div>
 </template>

src/views/steps/PersonalDemo.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-user" style="font-size: 3em" />
+        <i class="pi pi-fw pi-user" />
         <h1>Personal Component Content</h1>
     </div>
 </template>

src/views/steps/SeatDemo.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
+    <div class="stepsdemo-content">
-        <i class="pi pi-fw pi-ticket" style="font-size: 3em" />
+        <i class="pi pi-fw pi-ticket" />
         <h1>Seat Component Content</h1>
     </div>
 </template>

src/views/steps/StepsDemo.vue

@@ -3,12 +3,12 @@
         <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>
+                <p>Steps components is an indicator for the steps in a wizard workflow.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <Steps :model="items" />
+            <Steps :model="items" :readonly="false" />
             <router-view/>
         </div>
 
@@ -24,31 +24,19 @@ export default {
         return {
             items: [{
                 label: 'Personal',
-                to: '/steps',
+                to: '/steps'
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'First Step', detail: event.item.label});
-                }
             },
             {
                 label: 'Seat',
-                to: '/steps/seat',
+                to: '/steps/seat'
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Second Step', detail: event.item.label});
-                }
             },
             {
                 label: 'Payment',
-                to: '/steps/payment',
+                to: '/steps/payment'
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Third Step', detail: event.item.label});
-                }
             },
             {
                 label: 'Confirmation',
-                to: '/steps/confirmation',
+                to: '/steps/confirmation'
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Last Step', detail: event.item.label});
-                }
             }]
         }
     },
@@ -64,10 +52,14 @@ export default {
         font-weight: 400;
         display: inline-block;
         vertical-align: middle;
+        font-size: 24px;
+        margin-top: 1em;
     }
 
     i {
         vertical-align: middle;
+        font-size: 2em;
+        margin-top: .3em;
     }
 }
 </style>

src/views/tabmenu/CalendarDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-calendar" style="font-size: 3em" />
+        <i class="pi pi-fw pi-calendar" />
         <h1>Calendar Component Content</h1>
     </div>
 </template>

src/views/tabmenu/DocumentationDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-file" style="font-size: 3em" />
+        <i class="pi pi-fw pi-file" />
         <h1>Documentation Component Content</h1>
     </div>
 </template>

src/views/tabmenu/EditDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-pencil" style="font-size: 3em" />
+        <i class="pi pi-fw pi-pencil" />
         <h1>Edit Component Content</h1>
     </div>
 </template>

src/views/tabmenu/HomeDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-home" style="font-size: 3em" />
+        <i class="pi pi-fw pi-home" />
         <h1>Home Component Content</h1>
     </div>
 </template>

src/views/tabmenu/SettingsDemo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-cog" style="font-size: 3em" />
+        <i class="pi pi-fw pi-cog" />
         <h1>Settings Component Content</h1>
     </div>
 </template>

src/views/tabmenu/TabMenuDemo.vue

@@ -43,11 +43,14 @@ export default {
         font-weight: 400;
         display: inline-block;
         vertical-align: middle;
+        font-size: 24px;
+        margin-top: 1em;
     }
 
     i {
         vertical-align: middle;
+        font-size: 2em;
+        margin-top: .3em;
     }
 }
-
 </style>