#1275 for Steps

api-generator/components/steps.js

@@ -16,6 +16,12 @@ const StepsProps = [
         type: "boolean",
         default: "true",
         description: "Whether the items are clickable or not."
+    },
+    {
+        name: "exact",
+        type: "boolean",
+        default: "true",
+        description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
     }
 ];
 

src/components/steps/Steps.d.ts

@@ -4,6 +4,7 @@ interface StepsProps {
     id?: string;
     model?: any[];
     readonly?: boolean;
+    exact?: boolean;
 }
 
 declare class Steps {

src/components/steps/Steps.vue

@@ -4,13 +4,13 @@
             <template v-for="(item,index) of model" :key="item.to">
                 <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
                     <template v-if="!$slots.item">
-                        <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href}">
+                        <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
-                            <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation">
+                            <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
                                 <span class="p-steps-number">{{index + 1}}</span>
                                 <span class="p-steps-title">{{item.label}}</span>
                             </a>
                         </router-link>
-                        <span v-else class="p-menuitem-link" role="presentation">
+                        <span v-else :class="linkClass()" role="presentation">
                             <span class="p-steps-number">{{index + 1}}</span>
                             <span class="p-steps-title">{{item.label}}</span>
                         </span>
@@ -39,6 +39,10 @@ export default {
         readonly: {
             type: Boolean,
             default: true
+        },
+        exact: {
+            type: Boolean,
+            default: true
         }
     },
     methods: {
@@ -68,6 +72,12 @@ export default {
                 'p-disabled': this.isItemDisabled(item)
             }];
         },
+        linkClass(routerProps) {
+            return ['p-menuitem-link', {
+                'router-link-active': routerProps && routerProps.isActive,
+                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+            }];
+        },
         isItemDisabled(item) {
             return (this.disabled(item) || (this.readonly && !this.isActive(item)));
         },

src/views/steps/StepsDoc.vue

@@ -60,6 +60,18 @@ export default {
     </template>
 </Steps>
 </template>
+</code></pre>
+
+        <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;Steps :model="items"&gt;
+    &lt;template #item="{item}"&gt;
+        &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
+            &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
+        &lt;/router-link&gt;
+    &lt;/template&gt;
+&lt;/Steps&gt;
+</template>
 </code></pre>
 
         <h5>Properties</h5>
@@ -92,6 +104,12 @@ export default {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Whether the items are clickable or not.</td>
+                    </tr>
+                    <tr>
+                        <td>exact</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
                     </tr>
 				</tbody>
 			</table>