Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(VStepper): add new item-props prop #20651

Draft
wants to merge 2 commits into
base: dev
Choose a base branch
from

Conversation

johnleider
Copy link
Member

@johnleider johnleider commented Oct 31, 2024

Motivation and Context

TODO: add to vertical stepper

closes #20608

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, i) in items" v-bind="item" :key="i" />
        </v-stepper-header>
        <v-stepper-window />
      </v-stepper>
    </v-card>

    <v-card class="mt-4" color="primary">
      <v-card-title>Stepper with :item prop</v-card-title>

      <v-stepper
        :items="items"
        :model-value="items[2].value"
        hide-actions
        item-props
      />
    </v-card>

    <v-card class="mt-4" color="primary">
      <v-card-title>Stepper with :item prop</v-card-title>

      <v-stepper-vertical
        :items="items"
        :model-value="items[2].value"
        hide-actions
        item-props
      />
    </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>

@johnleider johnleider added this to the v3.8.0 (Andromeda) milestone Oct 31, 2024
@johnleider johnleider self-assigned this Oct 31, 2024
@johnleider johnleider changed the base branch from master to dev October 31, 2024 21:02
@KaelWD KaelWD changed the title feat: require vue 3.5 feat(VStepper): add new item-props prop Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant