feat(QStepper): flag to disable navigation through header quasarframework#1716

Author: rstoenescu

dev/components/components/stepper.vue

@@ -3,9 +3,10 @@
     <div class="layout-padding">
       <q-toggle label="Alternative Labels" v-model="alt" />
       <q-toggle label="Contractable" v-model="contractable" />
+      <q-toggle label="Header Step Navigation (Back)" v-model="backnav" />
       <br><br>
 
-      <q-stepper :color="color" flat ref="stepper" v-model="step" :alternative-labels="alt" :contractable="contractable">
+      <q-stepper :no-header-navigation="!backnav" :color="color" flat ref="stepper" v-model="step" :alternative-labels="alt" :contractable="contractable">
         <q-step default name="first" title="Ad style">
           <div v-for="n in 10">Step 1</div>
           <q-stepper-navigation>
@@ -50,7 +51,7 @@
 
       <br><br>
 
-      <q-stepper ref="stepper2" :color="color" v-model="step2" :alternative-labels="alt" vertical>
+      <q-stepper :no-header-navigation="!backnav" ref="stepper2" :color="color" v-model="step2" :alternative-labels="alt" vertical>
         <q-step default name="first" title="Ad style">
           <div v-for="n in 10">Step 1</div>
           <q-stepper-navigation>
@@ -99,6 +100,7 @@ export default {
       step2: 'first',
       alt: false,
       contractable: false,
+      backnav: true,
       color: 'secondary',
       text: ''
     }

src/components/stepper/QStepper.js

@@ -11,6 +11,7 @@ export default {
     color: String,
     vertical: Boolean,
     alternativeLabels: Boolean,
+    noHeaderNavigation: Boolean,
     contractable: Boolean,
     doneIcon: Boolean,
     activeIcon: Boolean,

src/components/stepper/StepTab.js

@@ -11,11 +11,15 @@ export default {
   },
   props: ['vm'],
   computed: {
+    hasNavigation () {
+      return !this.vm.__stepper.noHeaderNavigation
+    },
     classes () {
       return {
         'step-error': this.vm.error,
         'step-active': this.vm.active,
         'step-done': this.vm.done,
+        'step-navigation': this.vm.done && this.hasNavigation,
         'step-waiting': this.vm.waiting,
         'step-disabled': this.vm.disable,
         'step-colored': this.vm.active || this.vm.done,
@@ -28,7 +32,9 @@ export default {
   },
   methods: {
     __select () {
-      this.vm.select()
+      if (this.hasNavigation) {
+        this.vm.select()
+      }
     }
   },
   render (h) {
@@ -42,7 +48,7 @@ export default {
       on: {
         click: this.__select
       },
-      directives: __THEME__ === 'mat'
+      directives: __THEME__ === 'mat' && this.hasNavigation
         ? [{
           name: 'ripple',
           value: this.vm.done

src/components/stepper/stepper.ios.styl

@@ -29,9 +29,9 @@
     color black
     .q-stepper-dot
       color $stepper-label-inactive-color
-  &.step-done
-    cursor pointer
+  &.step-navigation
     user-select none
+    cursor pointer
     &:active
       background $stepper-active-background !important
   &.step-color
@@ -144,7 +144,7 @@
     top 100%
     margin-top 8px
 
-body.desktop .q-stepper-tab.step-done:hover
+body.desktop .q-stepper-tab.step-navigation:hover
   background $stepper-hover-background
 
 @media (max-width $breakpoint-sm-max)

src/components/stepper/stepper.mat.styl

@@ -29,9 +29,9 @@
     color black
     .q-stepper-dot
       color $stepper-label-inactive-color
-  &.step-done
-    cursor pointer
+  &.step-navigation
     user-select none
+    cursor pointer
   &.step-color
     color currentColor
   &.step-active .q-stepper-title
@@ -142,7 +142,7 @@
     top 100%
     margin-top 8px
 
-body.desktop .q-stepper-tab.step-done:hover
+body.desktop .q-stepper-tab.step-navigation:hover
   background $stepper-hover-background
 
 @media (max-width $breakpoint-sm-max)