<template>
  <div class="page-stepper">
    <typo-text variant="title-bold">Stepper</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold">Stepper</typo-text>
      <div class="wrap-example mb-3">
        <code>
          v-model=
          <select v-model="valueStepper">
            <option
              :value="item"
              v-for="(item, index) in listStepper"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
          allDone=
          <select v-model="allDone">
            <option :value="false"></option>
            <option :value="true">true</option>
          </select>
        </code>
      </div>
      <div class="wrap-content">
        <div>
          <stepper
            :list="listStepper"
            v-model="valueStepper"
            :allDone="allDone"
          />
        </div>
        <pre>
{{
`<stepper
  :list="listStepper"
  :allDone="allDone"
  v-model="valueStepper"
  @backClick="back()"
/>
attribute "allDone" used when all steps are complete

// data
listStepper: [
  "Tambah Perusahaan",
  "Tambah Admin",
  "Undang Anggota Tim",
  "Pilih Plan",
],
valueStepper: "Undang Anggota Tim",`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";
import Stepper from "@/components/Stepper";

export default {
  components: {
    TypoText,
    Stepper
  },
  data() {
    return {
      valueStepper: "Undang Anggota Tim",
      allDone: false,
      listStepper: [
        "Tambah Perusahaan",
        "Tambah Admin",
        "Undang Anggota Tim",
        "Pilih Plan",
      ],
    }
  },
}
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.page-stepper {
  .wrap-content {
    background: $neutral-1;
    padding: 75px 27px;
  }
}
</style>