Updated Stepper for v5.7.0

For now the validation stepper example can be seen in our demo app (or in live preview here: https://mdbootstrap.com/previews/templates/vue/#/components/pro/stepper ). The source code below:

    <template>
        <mdb-card class="indigo lighten-5 pb-5">
          <mdb-card-body>
            <mdb-stepper
              class="pt-5"
              buttons
              validation
              :validatedSteps="validatedSteps"
              @validate="validate"
            >
              <mdb-step name="Personal Information" slot="content" icon="user" :number="1">
                <h3 class="font-weight-bold pt-3 pl-0 my-4">
                  <mdb-card-title>Personal Information</mdb-card-title>
                </h3>
                <mdb-input required label="First Name" v-model="form[0].name" />
                <mdb-input required label="Second Name" v-model="form[0].surname" />
                <mdb-input required label="Address" v-model="form[0].address" />
              </mdb-step>
              <mdb-step name="Company Information" slot="content" icon="pen" :number="2">
                <h3 class="font-weight-bold pt-3 pl-0 my-4">
                  <mdb-card-title>Company Information</mdb-card-title>
                </h3>
                <mdb-input required label="Company Name" v-model="form[1].company" />
                <mdb-input required label="Company Address" v-model="form[1].address" />
              </mdb-step>
              <mdb-step name="Terms and conditions" slot="content" icon="check" :number="3">
                <h3 class="font-weight-bold pt-3 pl-0 my-4">
                  <mdb-card-title>Terms and conditions</mdb-card-title>
                </h3>
                <mdb-input
                  type="checkbox"
                  id="checkbox3"
                  required
                  v-model="form[2].condition"
                  label="I agree to the terms and conditions"
                />
                <mdb-input type="checkbox" id="checkbox4" label="I want to receive newsletter" />
              </mdb-step>
            </mdb-stepper>
          </mdb-card-body>
        </mdb-card>
    </template>
    <script>
    import {
      mdbStepper,
      mdbStep,
      mdbInput,
      mdbTextarea,
      mdbCard,
      mdbCardBody,
      mdbIcon,
      mdbCardHeader,
      mdbCardTitle
    } from "mdbvue";

    export default {
      components: {
        mdbStepper,
        mdbStep,
        mdbInput,
        mdbTextarea,
        mdbCard,
        mdbCardBody,
        mdbIcon,
        mdbCardHeader,
        mdbCardTitle
      },
      data() {
        return {
          validatedSteps: {},
          form: [{
            name: '',
            surname: '',
            address: ''
          },
          {
            company: '',
            address: ''
          },
          {
            condition: false
          }
          ]
        };
      },
      methods: {
        checkForm(form) {
          return Object.keys(form).length === Object.keys(form)
            .filter(key => form[key].length > 0).length;
        },
        validate(e) {
          if (e === 3) {
            this.validatedSteps[e] = this.form[e - 1].condition;
          }
          else if (this.checkForm(this.form[e - 1])) {
            this.validatedSteps[e] = true;
          }
          else {
            this.validatedSteps[e] = false;
          }
        }
      }
    };
  </script>