From 978dce8c3d6322592d6b58c15d1614fc9e972760 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 6 Dec 2019 17:09:29 +0300
Subject: [PATCH] Implemented readonly support

---
 src/components/steps/Steps.vue | 11 ++++-
 src/views/steps/StepsDemo.vue  |  2 +-
 src/views/steps/StepsDoc.vue   | 87 +++++++++++++++++++++-------------
 3 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 0fa274520..389a7534d 100644
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -2,10 +2,14 @@
     <div :class="containerClass">
         <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)">
+                <router-link :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)" v-if="!isItemDisabled(item)">
                     <span class="p-steps-number">{{index + 1}}</span>
                     <span class="p-steps-title">{{item.label}}</span>
                 </router-link>
+                <span v-else class="p-menuitem-link">
+                    <span class="p-steps-number">{{index + 1}}</span>
+                    <span class="p-steps-title">{{item.label}}</span>
+                </span>
             </li>
         </ul>
     </div>
@@ -40,8 +44,11 @@ export default {
         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))
+                'p-disabled': this.isItemDisabled(item)
             }];
+        },
+        isItemDisabled(item) {
+            return (item.disabled || (this.readonly && this.activeRoute !== item.to));
         }
     },
     computed: {
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index 0ebc16c35..d189d58e3 100644
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Steps</h1>
-                <p>Steps components is an indicator for the steps in a wizard workflow.</p>
+                <p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
             </div>
         </div>
 
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index 06b689ddd..cbfb607bb 100644
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -8,12 +8,12 @@ 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>
+                <p>Steps 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>
+				<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
 <CodeHighlight>
-&lt;Menu :model="items" /&gt;
+&lt;Steps :model="items" /&gt;
 &lt;router-view /&gt;
 </CodeHighlight>
 
@@ -21,16 +21,32 @@ import Steps from 'primevue/steps';
 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'}
-            ]
+			items: [{
+                label: 'Personal',
+                to: '/steps'
+            },
+            {
+                label: 'Seat',
+                to: '/steps/seat'
+            },
+            {
+                label: 'Payment',
+                to: '/steps/payment'
+            },
+            {
+                label: 'Confirmation',
+                to: '/steps/confirmation'
+            }]
 		}
 	}
 }
+</CodeHighlight>
+
+                <h3>Interactive</h3>
+                <p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
+<CodeHighlight>
+&lt;Steps :model="items" :readonly="false" /&gt;
+&lt;router-view /&gt;
 </CodeHighlight>
 
                 <h3>Properties</h3>
@@ -51,6 +67,12 @@ export default {
                                 <td>array</td>
                                 <td>null</td>
                                 <td>An array of menuitems.</td>
+                            </tr>
+                             <tr>
+                                <td>readonly</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the items are clickable or not.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -68,28 +90,20 @@ export default {
 						</thead>
 						<tbody>
                             <tr>
-                                <td>p-tabmenu</td>
+                                <td>p-steps</td>
                                 <td>Container element.</td>
                             </tr>
                             <tr>
-                                <td>p-tabmenu-nav</td>
-                                <td>List element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-tabmenuitem</td>
+                                <td>p-steps-item</td>
                                 <td>Menuitem element.</td>
                             </tr>
                             <tr>
-                                <td>p-highlight</td>
-                                <td>Active menuitem element.</td>
+                                <td>p-steps-number</td>
+                                <td>Number of menuitem.</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>
+                                <td>p-steps-title</td>
+                                <td>Label of menuitem.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -105,7 +119,7 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Menu :model="items" /&gt;
+&lt;Steps :model="items" :readonly="false" /&gt;
 &lt;router-view /&gt;
 </template>
 </CodeHighlight>
@@ -114,13 +128,22 @@ export default {
 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'}
-            ]
+            items: [{
+                label: 'Personal',
+                to: '/steps'
+            },
+            {
+                label: 'Seat',
+                to: '/steps/seat'
+            },
+            {
+                label: 'Payment',
+                to: '/steps/payment'
+            },
+            {
+                label: 'Confirmation',
+                to: '/steps/confirmation'
+            }]
         }
     }
 }