fix: Final fix for QStepper

Author: rstoenescu

dev/components/components/stepper.vue

@@ -5,34 +5,34 @@
       <br><br>
 
       <q-stepper :color="color" flat ref="stepper" v-model="step" :alternative-labels="alt">
-        <q-step :order="2" default name="first" title="Ad style">
+        <q-step default name="first" title="Ad style">
           <div v-for="n in 10">Step 1</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper.next()">Continue</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="5" error title="Custom channels" subtitle="Alert message">
+        <q-step error title="Custom channels" subtitle="Alert message">
           <div v-for="n in 10">Step 2</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="4" title="Get code">
+        <q-step title="Get code">
           <div v-for="n in 3">Step 3</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="3" name="fifth" disable title="Disabled">
+        <q-step name="fifth" disable title="Disabled">
           <div v-for="n in 3">Step 4</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="1" name="fourth" title="Editable">
+        <q-step name="fourth" title="Editable">
           <div v-for="n in 3">Step 5</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper.goToStep('first')">Restart</q-btn>
@@ -49,34 +49,34 @@
       <br><br>
 
       <q-stepper ref="stepper2" :color="color" v-model="step2" :alternative-labels="alt" vertical>
-        <q-step :order="2" default name="first" title="Ad style">
+        <q-step default name="first" title="Ad style">
           <div v-for="n in 10">Step 1</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper2.next()">Continue</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="5" error title="Custom channels" subtitle="Alert message">
+        <q-step error title="Custom channels" subtitle="Alert message">
           <div v-for="n in 10">Step 2</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper2.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper2.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="4" title="Get code">
+        <q-step title="Get code">
           <div v-for="n in 3">Step 3</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper2.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper2.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="3" name="fifth" disable title="Disabled">
+        <q-step name="fifth" disable title="Disabled">
           <div v-for="n in 3">Step 4</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper2.next()">Next</q-btn>
             <q-btn :color="color" flat @click="$refs.stepper2.previous()">Back</q-btn>
           </q-stepper-navigation>
         </q-step>
-        <q-step :order="1" name="fourth" title="Editable">
+        <q-step name="fourth" title="Editable">
           <div v-for="n in 3">Step 5</div>
           <q-stepper-navigation>
             <q-btn :color="color" @click="$refs.stepper2.goToStep('first')">Restart</q-btn>

src/components/stepper/StepTab.vue

@@ -20,7 +20,7 @@
     <div class="q-stepper-dot row items-center justify-center q-stepper-line relative-position">
       <span class="row items-center justify-center">
         <q-icon v-if="vm.stepIcon" :name="vm.stepIcon"></q-icon>
-        <span v-else>{{ vm.actualOrder + 1 }}</span>
+        <span v-else>{{ vm.innerOrder + 1 }}</span>
       </span>
     </div>
     <div v-if="vm.title" class="q-stepper-label q-stepper-line relative-position">