feat(VStepper): update to v3

[nekosaur]

Description

BREAKING CHANGES

• Current implementation does not allow one to manually define complete markup. Instead use items prop and content.* slots. This hides the large structural differences between horizontal and vertical directions.

Motivation and Context

Update v-stepper for v3

How Has This Been Tested?

Markup:

<template>
  <v-app>
    <v-locale-provider :rtl="rtl">
      <v-btn @click="rtl = !rtl">rtl</v-btn>
      <v-stepper :items="items">
        <template #content.foo="props">
          <v-card>
            <v-card-text>
              hello
            </v-card-text>
          </v-card>
        </template>
        <template #content.bar="props">
          <v-card>
            <v-card-text>
              hello
            </v-card-text>
          </v-card>
        </template>
        <template #content.baz="props">
          <v-card>
            <v-card-text>
              baz
            </v-card-text>
          </v-card>
        </template>
      </v-stepper>

      <hr class="ma-10">

      <v-stepper :items="items" direction="horizontal" stacked-labels>
        <template #content.foo="props">
          <v-card>
            <v-card-text>
              hello
            </v-card-text>
          </v-card>
        </template>
        <template #content.bar="props">
          <v-card>
            <v-card-text>
              hello
            </v-card-text>
          </v-card>
        </template>
        <template #content.baz="props">
          <v-card>
            <v-card-text>
              baz
            </v-card-text>
          </v-card>
        </template>
      </v-stepper>
    </v-locale-provider>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data: () => ({
      rtl: false,
      open: null,
      active: null,
      items: [
        {
          value: 'foo',
          title: 'Foo',
          subtitle: 'Subtitle',
        },
        {
          value: 'bar',
          title: 'Foo',
          subtitle: 'Subtitle',
        },
        {
          value: 'baz',
          title: 'Baz',
        },
      ],
      loadedItems: [
        {
          value: 'root',
          text: 'root',
          loaded: false,
          children: [],
        },
      ],
      opened: [],
      isCtrl: false,
      count: 1,
    }),
  }
</script>

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [x] The PR title is no longer than 64 characters.
• [x] The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• [x] My code follows the code style of this project.
• [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)