From 956698fa379bf91f2a83428bf215b846f93fdc1a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 6 Dec 2019 16:52:42 +0300
Subject: [PATCH] Initiated Steps Component

---
 src/components/steps/Steps.vue          | 29 ++++++++++++++++++++++---
 src/views/steps/ConfirmationDemo.vue    |  4 ++--
 src/views/steps/PaymentDemo.vue         |  4 ++--
 src/views/steps/PersonalDemo.vue        |  4 ++--
 src/views/steps/SeatDemo.vue            |  4 ++--
 src/views/steps/StepsDemo.vue           | 28 +++++++++---------------
 src/views/tabmenu/CalendarDemo.vue      |  2 +-
 src/views/tabmenu/DocumentationDemo.vue |  2 +-
 src/views/tabmenu/EditDemo.vue          |  2 +-
 src/views/tabmenu/HomeDemo.vue          |  2 +-
 src/views/tabmenu/SettingsDemo.vue      |  2 +-
 src/views/tabmenu/TabMenuDemo.vue       |  5 ++++-
 12 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 2dd5c5f2a..0fa274520 100644
--- a/src/components/steps/Steps.vue
+++ b/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 {
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index af057be64..b01d2b1ec 100644
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-check" style="font-size: 3em" />
+    <div class="stepsdemo-content">
+        <i class="pi pi-fw pi-check" />
         <h1>Confirmation Component Content</h1>
     </div>
 </template>
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
index aba0cb9a5..311ee96e8 100644
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-money-bill" style="font-size: 3em" />
+    <div class="stepsdemo-content">
+        <i class="pi pi-fw pi-money-bill" />
         <h1>Payment Component Content</h1>
     </div>
 </template>
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index cbed46127..c61f705e7 100644
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-user" style="font-size: 3em" />
+    <div class="stepsdemo-content">
+        <i class="pi pi-fw pi-user" />
         <h1>Personal Component Content</h1>
     </div>
 </template>
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 575df1315..5c5d76e6b 100644
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-ticket" style="font-size: 3em" />
+    <div class="stepsdemo-content">
+        <i class="pi pi-fw pi-ticket" />
         <h1>Seat Component Content</h1>
     </div>
 </template>
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index b1d3aca76..0ebc16c35 100644
--- a/src/views/steps/StepsDemo.vue
+++ b/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',
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'First Step', detail: event.item.label});
-                }
+                to: '/steps'
             },
             {
                 label: 'Seat',
-                to: '/steps/seat',
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Second Step', detail: event.item.label});
-                }
+                to: '/steps/seat'
             },
             {
                 label: 'Payment',
-                to: '/steps/payment',
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Third Step', detail: event.item.label});
-                }
+                to: '/steps/payment'
             },
             {
                 label: 'Confirmation',
-                to: '/steps/confirmation',
-                command: (event) => {
-                    this.$toast.add({severity:'info', summary:'Last Step', detail: event.item.label});
-                }
+                to: '/steps/confirmation'
             }]
         }
     },
@@ -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>
\ No newline at end of file
diff --git a/src/views/tabmenu/CalendarDemo.vue b/src/views/tabmenu/CalendarDemo.vue
index cdcf2856b..7f6fcb192 100644
--- a/src/views/tabmenu/CalendarDemo.vue
+++ b/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>
diff --git a/src/views/tabmenu/DocumentationDemo.vue b/src/views/tabmenu/DocumentationDemo.vue
index ec1455de3..ade2adc7e 100644
--- a/src/views/tabmenu/DocumentationDemo.vue
+++ b/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>
diff --git a/src/views/tabmenu/EditDemo.vue b/src/views/tabmenu/EditDemo.vue
index 4f6f35c36..df3425656 100644
--- a/src/views/tabmenu/EditDemo.vue
+++ b/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>
diff --git a/src/views/tabmenu/HomeDemo.vue b/src/views/tabmenu/HomeDemo.vue
index 4a39e5277..1cbc35efc 100644
--- a/src/views/tabmenu/HomeDemo.vue
+++ b/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>
diff --git a/src/views/tabmenu/SettingsDemo.vue b/src/views/tabmenu/SettingsDemo.vue
index cdb86e6f7..86b1b6848 100644
--- a/src/views/tabmenu/SettingsDemo.vue
+++ b/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>
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 719ca9959..bbe36c97f 100644
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/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>
\ No newline at end of file