feat(VStepper): pass item props from item objects

[mringler]

Description

fixes #19036 (see for problem description)

Implementation is straight-forward: If items are objects, their properties are filtered by prop names of VStepperItem and added to the internal item.

Tests are added to ensure string items still work and props are taken over as expected.

Markup:

<template>
  <v-container>
    <v-card color="primary">
      <v-card-title>Stepper with items in slot</v-card-title>

      <v-stepper :model-value="items[2].value">
        <v-stepper-header>
          <v-stepper-item v-for="item in items" v-bind="item"></v-stepper-item>
        </v-stepper-header>
        <v-stepper-window />
      </v-stepper>
    </v-card>
    <v-card color="primary" class="mt-4">
      <v-card-title>Stepper with :item prop</v-card-title>

      <v-stepper :model-value="items[2].value" :items="items"
        ><template #actions
      /></v-stepper>
    </v-card>
  </v-container>
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import type { VStepperItem } from 'vuetify/components';

    const items = ref([
      {
        value: 'a',
        title: 'Completed with color',
        complete: true,
        color: 'secondary',
      },{
        value: 'b',
        title: 'Erroneous',
        rules: [() => false],
      },{
        value: 'c',
        title: 'Disabled current step',
        disabled: true
      },{
        value: 'd',
        title: 'Subtitle & custom icon',
        subtitle: 'subtitle',
        icon: 'mdi-car',
      },
    ])
</script>

Notes:

• VList works similarly, but the item-props prop has to be used to enable takeover whole or in parts. This makes sense for lists, which are often generated using existing data, like a list of purchases. I am not sure if it makes sense for a stepper, which is generally not created from unrelated data objects. But I can easily add it if requested.
• I would like to rename the items variable to internalItems, since the word item is somewhat overused in the component (there are "items" in props, returned from useGroup, and the internal items), , but I am not sure if this is the place to do it (is it?).

This is my first contribution, please let me know what I am doing wrong! Thank you for Vuetify! I enjoy it a lot.

[mringler]

Hmm, unrelated tests fail, please let me know what to do about that.

[captainlettuce]

Hmm, unrelated tests fail, please let me know what to do about that.

I'm not a maintainer but if you rebase on main (if possible); the pipeline should trigger again and hopefully pass :)

I'm also waiting for this to be merged, thanks for your fix @mringler

[mringler]

@captainlettuce Thanks for the tip! Changed to master, which apparently does not run tests at all. Problem solved (kind of).

[johnleider]

I feel this implementation should match what we do with v-list, where we have an item-props property https://github.com/vuetifyjs/vuetify/blob/3d9deb7db53e70e0605b76f270f7d962d38f09e4/packages/vuetify/src/composables/list-items.ts#L63

[mringler]

@johnleider Thank you for the feedback, I have updated code and tests.

[johnleider]

As a true feature, this will also need to go to the dev branch. Sorry for not mentioning this before.

[mringler]

@johnleider No worries, thanks for letting me know. Rebased to dev and changed merge target.