feat(VCard): port to v3 #13674

johnleider · 2021-05-18T20:50:54Z

Description

Here are various implementations of card (the component's specifications are garbage) for reference

Specification

Motivation and Context

Bug fixes

fixes [Bug Report] Word Wrapping in Card Title breaks words before wrapping the line. #9130

Features

added new props to v-card
- append-avatar
- append-icon
- prepend-avatar
- prepend-icon
- title
- subtitle
- text
added new slots to v-card
- append
- prepend
- image
- text
- subtitle
- text
- title
added image, icon, and density support to v-avatar
added new prop tile to rounded composable
added 3 new css variables, high-emphasis-opacity, medium-emphasis-opacity, and disabled-opacity

Styles

added new sass variables to v-btn for v-card-actions
added new sass variables to v-avatar for density

Breaking changes

renamed img prop to image
removed active-class prop
removed all router-link and nuxt props
removed dark and light props
removed loading/loader-height props
removed shaped prop / use rounded="shaped"
removed raised prop / use elevation="8"

Styles

renamed $card-outlined-border-width to $card-border-width-thin-width
renamed $card-btn-margin-x to $button-card-actions-margin
renamed $card-btn-padding to $button-card-actions-padding
removed $adjacent-sibling-text-padding-top
removed $card-btn-small-margin-x
removed $card-overflow-wrap
removed $card-raised-elevation
removed $card-shaped-border-radius
removed $card-title-adjacent-sibling-subtitle-margin-top
removed $card-title-adjacent-sibling-subtitle-text-padding-top
removed $card-whitespace

How Has This Been Tested?

Markup:

<template>
  <v-app>
    <div class="py-12">
      <v-container fluid>
        <v-row>
          <v-col cols="4">
            <v-card
              density="comfortable"
              elevation="6"
              append-icon="mdi-vuetify"
            >
              <template #media>
                <v-img
                  src="https://images.unsplash.com/photo-1621454804914-f197f2acfeb7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
                />
              </template>

              <template #prepend>
                <v-avatar image="https://images.unsplash.com/photo-1621454804914-f197f2acfeb7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" />
              </template>

              <template #title>
                Default
              </template>

              <template #subtitle>
                Secondary text
              </template>

              <template #text>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id repellendus, veniam rem saepe earum obcaecati nisi optio! Voluptatem repellat eaque voluptate corrupti architecto, totam dicta. Magnam amet illo dolores porro.
              </template>

              <template #actions>
                <v-btn>Action 1</v-btn>

                <v-btn>Action 2</v-btn>
              </template>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              :text="text"
              density="comfortable"
              elevation="6"
              prepend-avatar="https://randomuser.me/api/portraits/men/76.jpg"
              subtitle="Secondary text"
              title="Comfortable"
            />
          </v-col>

          <v-col cols="4">
            <v-card
              :text="text"
              density="compact"
              elevation="24"
              prepend-avatar="https://randomuser.me/api/portraits/men/76.jpg"
              subtitle="Secondary text"
              title="Compact"
            />
          </v-col>

          <v-col cols="4">
            <v-card
              :text="text"
              append-avatar="https://randomuser.me/api/portraits/men/76.jpg"
              hover
              prepend-icon="mdi-vuetify"
              subtitle="Secondary text"
              title="Media card"
            >
              <v-card-media>
                <v-img
                  src="https://images.unsplash.com/photo-1621454804914-f197f2acfeb7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
                  cover
                />
              </v-card-media>

              <template #actions>
                <v-btn text>
                  Action 1
                </v-btn>
                <v-btn text>
                  Action 1
                </v-btn>
              </template>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card>
              <v-card-header>
                <v-card-header-text>
                  <v-card-title>Media card</v-card-title>

                  <v-card-subtitle>Secondary text</v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-card-media>
                <v-img
                  src="https://images.unsplash.com/photo-1621390324893-ea412aa9453c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
                  cover
                />
              </v-card-media>

              <v-card-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas, dolorum placeat cum, aliquid voluptates rem dignissimos neque voluptatem qui repudiandae ad minima, commodi quaerat impedit voluptatibus quis! Doloribus, vero.
              </v-card-text>

              <v-divider />

              <v-card-actions>
                <v-btn
                  text
                  color="primary"
                >
                  Action 1
                </v-btn>
                <v-btn
                  text
                  color="primary"
                >
                  Action 2
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card>
              <v-card-media>
                <v-img
                  src="https://images.unsplash.com/photo-1621454804914-f197f2acfeb7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
                  cover
                />
              </v-card-media>

              <v-card-header>
                <v-card-avatar>
                  <v-avatar image="https://randomuser.me/api/portraits/men/76.jpg" />
                </v-card-avatar>
                <v-card-header-text>
                  <v-card-title>Another card</v-card-title>

                  <v-card-subtitle>Secondary text</v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-divider />

              <v-card-text>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas, dolorum placeat cum, aliquid voluptates rem dignissimos neque voluptatem qui repudiandae ad minima, commodi quaerat impedit voluptatibus quis! Doloribus, vero.
              </v-card-text>

              <v-card-actions>
                <v-btn
                  text
                  color="primary"
                >
                  Action 1
                </v-btn>
                <v-btn
                  text
                  color="primary"
                >
                  Action 2
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card max-width="400" class="mx-auto mb-2">
              <v-card-media>
                <v-img src="https://cdn.vuetifyjs.com/images/cards/cooking.png" />
              </v-card-media>

              <v-card-header>
                <v-card-header-text>
                  <v-card-title>Cafe Badilico</v-card-title>

                  <v-card-subtitle class="my-2">
                    <div class="d-flex mr-4">
                      <v-icon v-for="n in 5" :key="n" size="14" color="yellow-darken-3">mdi-star</v-icon>
                    </div>

                    4.5 (413)
                  </v-card-subtitle>

                  <v-card-subtitle class="text-subtitle-1">
                    $ • Italian, Cafe
                  </v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-card-text>
                Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.
              </v-card-text>

              <v-divider class="mx-4" />

              <v-card-title>
                Tonight's availability
              </v-card-title>

              <v-card-text class="d-flex">
                <v-btn class="mr-2" rounded="pill" flat color="grey-lighten-2">
                  5:30PM
                </v-btn>

                <v-btn class="mr-2" rounded="pill" flat color="primary">
                  7:30PM
                </v-btn>

                <v-btn class="mr-2" rounded="pill" flat color="grey-lighten-2">
                  8:00PM
                </v-btn>

                <v-btn rounded="pill" flat color="grey-lighten-2">
                  9:00PM
                </v-btn>
              </v-card-text>

              <v-card-actions>
                <v-btn
                  color="deep-purple-lighten-2"
                  text
                  @click="reserve"
                >
                  Reserve
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              class="mx-auto mb-2"
              max-width="344"
              outlined
            >
              <v-card-header>
                <v-card-header-text>
                  <div class="text-overline mb-4">
                    OVERLINE
                  </div>

                  <v-card-title class="text-headline mb-1">
                    Headline 5
                  </v-card-title>

                  <v-card-subtitle>
                    Greyhound divisely hello coldly fonwderfully
                  </v-card-subtitle>
                </v-card-header-text>

                <v-card-avatar>
                  <v-avatar
                    rounded="0"
                    size="80"
                    color="grey"
                  />
                </v-card-avatar>
              </v-card-header>

              <v-card-actions>
                <v-btn
                  outlined
                  rounded="pill"
                >
                  Button
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              class="mx-auto mb-2"
              max-width="344"
            >
              <v-card-header>
                <v-card-header-text>
                  <v-card-subtitle>Word of the Day</v-card-subtitle>

                  <v-card-title class="text-h4 mt-2 mb-6">el·ee·mos·y·nar·y</v-card-title>

                  <v-card-subtitle>adjective</v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-card-text>
                relating to or dependent on charity; charitable.<br>
                "an eleemosynary educational institution."
              </v-card-text>

              <v-card-actions>
                <v-btn
                  text
                  color="teal-accent-4"
                >
                  Learn More
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              class="mx-auto mb-2"
              max-width="344"
            >
              <v-card-media>
                <v-img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" />
              </v-card-media>

              <v-card-header>
                <v-card-header-text>
                  <v-card-title>Top western road trips</v-card-title>

                  <v-card-subtitle>1,00 miles of wonder</v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-card-actions>
                <v-btn text color="orange-lighten-2">Explore</v-btn>

                <v-spacer />

                <v-btn icon="mdi-chevron-down" density="comfortable" @click="show = !show" />
              </v-card-actions>

              <div v-show="show">
                <v-divider />

                <v-card-text>
                  I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
                </v-card-text>
              </div>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              class="mx-auto mb-2"
              max-width="500"
            >
              <v-system-bar
                color="indigo-darken-2"
                dark
              >
                <v-spacer />

                <v-icon>mdi-window-minimize</v-icon>

                <v-icon>mdi-window-maximize</v-icon>

                <v-icon>mdi-close</v-icon>
              </v-system-bar>

              <v-app-bar
                color="indigo"
                dark
                style="position: relative;"
              >
                <v-app-bar-nav-icon />

                <v-app-bar-title>Discover</v-app-bar-title>

                <v-spacer />

                <v-btn icon>
                  <v-icon>mdi-magnify</v-icon>
                </v-btn>
              </v-app-bar>

              <v-container fluid>
                <v-row dense>
                  <v-col
                    v-for="card in cards"
                    :key="card.title"
                    :cols="card.flex"
                  >
                    <v-card>
                      <v-card-media>
                        <v-img
                          :src="card.src"
                          class="text-white"
                        >
                          <div class="d-flex align-end" style="height: 100%;">
                            <v-card-title v-text="card.title" />
                          </div>
                        </v-img>
                      </v-card-media>

                      <v-card-actions>
                        <v-spacer />

                        <v-btn icon="mdi-heart" density="comfortable" />

                        <v-btn icon="mdi-bookmark" density="comfortable" />

                        <v-btn icon="mdi-share-variant" density="comfortable" />
                      </v-card-actions>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              max-width="400"
              class="mx-auto mb-2"
            >
              <v-system-bar
                color="pink darken-2"
                dark
              >
                <v-spacer />

                <v-icon>mdi-window-minimize</v-icon>

                <v-icon>mdi-window-maximize</v-icon>

                <v-icon>mdi-close</v-icon>
              </v-system-bar>

              <v-app-bar
                dark
                color="pink"
                style="position: relative;"
              >
                <v-app-bar-nav-icon />

                <v-app-bar-title>My Music</v-app-bar-title>

                <v-spacer />

                <v-btn icon>
                  <v-icon>mdi-magnify</v-icon>
                </v-btn>
              </v-app-bar>

              <v-container>
                <v-row dense>
                  <v-col cols="12">
                    <v-card
                      color="#385F73"
                      title="Unlimited music now"
                      text="Listen to your favorite artists and albums whenever and wherever, online and offline."
                    >
                      <template #actions>
                        <v-btn>Listen Now</v-btn>
                      </template>
                    </v-card>
                  </v-col>

                  <v-col cols="12">
                    <v-card color="#1F7087">
                      <v-card-header>
                        <div class="flex-grow-1 d-flex flex-column justify-space-between align-self-stretch">
                          <v-card-header-text>
                            <v-card-title>Supermodel</v-card-title>

                            <v-card-subtitle>Foster the People</v-card-subtitle>
                          </v-card-header-text>

                          <div>
                            <v-btn
                              size="small"
                              rounded="pill"
                              outlined
                            >
                              Start Radio
                            </v-btn>
                          </div>
                        </div>

                        <v-card-avatar>
                          <v-avatar
                            rounded="0"
                            size="125"
                            image="https://cdn.vuetifyjs.com/images/cards/foster.jpg"
                          />
                        </v-card-avatar>
                      </v-card-header>
                    </v-card>
                  </v-col>

                  <v-col cols="12">
                    <v-card color="#952175">
                      <v-card-header>
                        <div class="flex-grow-1 d-flex flex-column justify-space-between align-self-stretch">
                          <v-card-header-text>
                            <v-card-title>Halcyon Days</v-card-title>

                            <v-card-subtitle>Ellie Goulding</v-card-subtitle>
                          </v-card-header-text>

                          <v-btn
                            size="small"
                            icon="mdi-play"
                            text
                          />
                        </div>

                        <v-card-avatar>
                          <v-avatar
                            rounded="0"
                            size="125"
                            image="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
                          />
                        </v-card-avatar>
                      </v-card-header>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </v-card>
          </v-col>

          <v-col cols="4">
            <v-card
              class="mx-auto mb-2"
              max-width="344"
            >
              <v-card-header>
                <v-card-header-text>
                  <v-card-subtitle>Word of the Day</v-card-subtitle>

                  <v-card-title class="text-h4 mt-2 mb-6">be•nev•o•lent</v-card-title>

                  <v-card-subtitle>adjective</v-card-subtitle>
                </v-card-header-text>
              </v-card-header>

              <v-card-text>
                well meaning and kindly.<br>
                "a benevolent smile"
              </v-card-text>

              <v-card-actions>
                <v-btn
                  text
                  color="deep-purple-accent-4"
                >
                  Learn More
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      cards: [
        { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 12 },
        { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6 },
        { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6 },
      ],
      text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam necessitatibus eum numquam, earum maxime nisi ut temporibus, quia repellendus magnam ipsum voluptate saepe quos vitae, autem et id non modi.',
    }),
  }
</script>

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
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:

The PR title is no longer than 64 characters.
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).
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)

nekosaur · 2021-05-23T09:23:57Z

Some thoughts:

What's the difference between media and image?
Are the prepend/append slot/prop names too general? Is it obvious that they are for the header?
It's not immediately clear how/where v-card-item fits into the markup of a card. Looking at how it's used in VCard, should it not be named v-card-header?

johnleider · 2021-05-24T18:30:27Z

Some thoughts:

What's the difference between media and image?

Are the prepend/append slot/prop names too general? Is it obvious that they are for the header?

It's not immediately clear how/where v-card-item fits into the markup of a card. Looking at how it's used in VCard, should it not be named v-card-header?

Media encompasses v-img and v-video in the future, image acts the same way as v-navigation-drawer, v-app-bar, etc. It is a background image that fills the component
This is to keep the API in line with other components that use prepend and append
v-card-item has 2 main purposes
- it provides the markup required to support prepend/append icon/avatar support, and keep it similar to like components such as v-list-item
Answered above

nekosaur · 2021-05-24T18:50:18Z

Some thoughts:

What's the difference between media and image?

Are the prepend/append slot/prop names too general? Is it obvious that they are for the header?

It's not immediately clear how/where v-card-item fits into the markup of a card. Looking at how it's used in VCard, should it not be named v-card-header?

Media encompasses v-img and v-video in the future, image acts the same way as v-navigation-drawer, v-app-bar, etc. It is a background image that fills the component

This is to keep the API in line with other components that use prepend and append

v-card-item has 2 main purposes

it provides the markup required to support prepend/append icon/avatar support, and keep it similar to like components such as v-list-item

Answered above

I wonder if that will cause confusion among users.
I personally don't see an issue with being more specific here. They will still share append/prepend with other usages
I don't think it's a good idea to try to equate v-card > header with v-list > v-list-item etc. They are two different things.

johnleider · 2021-05-24T19:27:25Z

I wonder if that will cause confusion among users.

I personally don't see an issue with being more specific here. They will still share append/prepend with other usages

I don't think it's a good idea to try to equate v-card > header with v-list > v-list-item etc. They are two different things.

I don't think this is going to be an issue since it's standardizing the framework
Something like prepend-header and append-header?
I'm equating v-card to a v-list-item only in terms of interface.
- v-list-item-content will probably be renamed to v-list-item-header in the future

nekosaur · 2021-05-24T21:26:20Z

Something like prepend-header and append-header?

yes, something like that

I'm equating v-card to a v-list-item only in terms of interface.

I think the markup becomes very weird though

<v-card>
  <v-card-item>
    <v-card-avatar/>
    <v-card-header>
      ...
    </v-card-header>
    <v-card-avatar/>
  </v-card-item>
  <v-card-text/>
</v-card>

vs

<v-card>
  <v-card-header>
    <v-card-avatar/>
    ...
    <v-card-avatar/>
  </v-card-header>
  <v-card-text/>
</v-card>

which to me seems more natural

johnleider · 2021-05-25T00:21:01Z

The only way to align prepend/append with a title/subtitle is if the latter has a wrapper. The following won't work:

<v-card>
  <v-card-header>
    <v-card-avatar />

    <v-card-title />

    <v-card-subtitle />

    <v-card-avatar />
  </v-card-header>
</v-card>

We need something like this:

<v-card>
  <v-card-header>
    <v-card-avatar />

    <v-card-some-component-name>
      <v-card-title />

      <v-card-subtitle />
    </v-card-some-component-name>

    <v-card-avatar />
  </v-card-header>
</v-card>

nekosaur · 2021-05-25T08:33:31Z

The only way to align prepend/append with a title/subtitle is if the latter has a wrapper. The following won't work:

<v-card>
  <v-card-header>
    <v-card-avatar />

    <v-card-title />

    <v-card-subtitle />

    <v-card-avatar />
  </v-card-header>
</v-card>

We need something like this:

<v-card>
  <v-card-header>
    <v-card-avatar />

    <v-card-some-component-name>
      <v-card-title />

      <v-card-subtitle />
    </v-card-some-component-name>

    <v-card-avatar />
  </v-card-header>
</v-card>

<v-card-some-component-name> -> <v-card-header-content> or <v-card-header-text>?

johnleider · 2021-05-25T21:29:46Z

Requesting Final comments from @vuetifyjs/core-team

re-used logic in VBtn to add support for density / size combinations BREAKING CHANGE: the default avatar height is now 40px

fixes #9130

Co-authored-by: Elijah Kotyluk <elijah@elijahkotyluk.com>

johnleider force-pushed the feat/v3-card branch 2 times, most recently from 5843b18 to 7fc3088 Compare May 20, 2021 15:52

This was referenced May 22, 2021

[Bug Report] When v-avatar is first-child of v-card, border-top-radius is overwritten #11321

Closed

[Bug Report] v-card inside v-dialog then v-card-text has no top padding #8679

Closed

johnleider requested review from nekosaur, KaelWD and jacekkarczmarczyk and removed request for nekosaur and KaelWD May 23, 2021 21:52

johnleider added this to the v3.0.0 milestone May 23, 2021

johnleider added this to In progress in Vuetify 3 - Titan via automation May 23, 2021

johnleider added T: feature A new feature V3: Phase 2 labels May 23, 2021

johnleider self-assigned this May 23, 2021

johnleider added the C: VCard VCard label May 23, 2021

johnleider marked this pull request as ready for review May 25, 2021 21:27

johnleider force-pushed the feat/v3-card branch from b53cc90 to 161307a Compare May 26, 2021 15:52

johnleider and others added 4 commits May 26, 2021 12:32

feat(VCard): convert to v3

b8c7261

feat(vcard): add hover prop

7438e7c

fix(hover): add missing styles

938438d

chore(VCard): update transition and will-change for hover

5b3af4a

johnleider added 20 commits May 26, 2021 12:32

feat(VAvatar): add image and icon props

5f09d55

feat(VCard): add new functional children components

87cef9c

feat(VCard): improve styling

3bd356a

feat(theme): add high/medium/disabled opacity css vars

4c25f0b

feat(VAvatar): add density support

c0f0da4

re-used logic in VBtn to add support for density / size combinations BREAKING CHANGE: the default avatar height is now 40px

feat(VCard): add better density support

db53bb8

fix(VCard): add missing background / text color

d2b3baf

feat(VCard): add slot support

6aa5fb1

feat(VCard): improve density support

afab814

style(VCard): re-order sass classes

29b97af

refactor(VCard): use v-slots where possible

78de556

fix(VCardTitle): word-wrap for long titles

76615e5

fixes #9130

refactor(VCardItem): remove explicit density height

f68e236

fix(VCard): resolve styling issues for multiple use-cases

d549c4e

feat(VCard): add new sass variables

c195050

refactor(VCard): rename header components

6dc0e84

chore(VCard): clean up and normalize code

c96ee60

docs(VCard): update component page

2aa83a2

test(VCard): add unit tests

758cba4

feat(VCard): add hover/state support

d2e7323

johnleider force-pushed the feat/v3-card branch from f78ec61 to d2e7323 Compare May 26, 2021 17:43

johnleider added 2 commits May 26, 2021 12:50

test(VCard): resolve snapshot issues

32858bb

fix(VCard): resolve styling issues with media and overlays

3e903ae

johnleider force-pushed the feat/v3-card branch from cca5965 to 3e903ae Compare May 26, 2021 18:26

fix(VCard): adjust how elevation works with hover

257ad1a

johnleider changed the title ~~feat/v3-card~~ feat(VCard): port to v3 May 26, 2021

johnleider merged commit c132009 into next May 26, 2021

Vuetify 3 - Titan automation moved this from In progress to Done May 26, 2021

johnleider deleted the feat/v3-card branch May 26, 2021 18:38

johnleider added a commit that referenced this pull request May 26, 2021

feat(VCard): port to v3 (#13674)

e5ee971

Co-authored-by: Elijah Kotyluk <elijah@elijahkotyluk.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(VCard): port to v3 #13674

feat(VCard): port to v3 #13674

johnleider commented May 18, 2021 •

edited

nekosaur commented May 23, 2021

johnleider commented May 24, 2021

nekosaur commented May 24, 2021

johnleider commented May 24, 2021

nekosaur commented May 24, 2021

johnleider commented May 25, 2021

nekosaur commented May 25, 2021

johnleider commented May 25, 2021

feat(VCard): port to v3 #13674

feat(VCard): port to v3 #13674

Conversation

johnleider commented May 18, 2021 • edited

Description

Motivation and Context

Bug fixes

Features

Styles

Breaking changes

Styles

How Has This Been Tested?

Markup:

Types of changes

Checklist:

nekosaur commented May 23, 2021

johnleider commented May 24, 2021

nekosaur commented May 24, 2021

johnleider commented May 24, 2021

nekosaur commented May 24, 2021

johnleider commented May 25, 2021

nekosaur commented May 25, 2021

johnleider commented May 25, 2021

johnleider commented May 18, 2021 •

edited