fix(VTimeline): alignment consistency

[J-Sek]

Description

The alignment of timeline items is not consistent across various usage types:

• when using default alignment
• when using side on VTimeline
• when using side on VTimelineItems

I aimed to keep all items (body and opposite) close to the center line. It then behaves the same as in v2.

Users that wish to restore previous behavior can do it with [align|justify]-self: stretch !important. For example:

/* justify-self for vertical / align-self for horizontal */
.v-timeline-item__body { justify-self: stretch !important; }
.v-timeline-item__opposite { justify-self: stretch !important; } 

Markup:

<template>
  <v-toolbar theme="dark">
    <v-btn-toggle class="my-2 mx-auto" v-model="direction">
      <v-btn value="vertical">vertical</v-btn>
      <v-btn value="horizontal">horizontal</v-btn>
    </v-btn-toggle>
  </v-toolbar>
  <v-app theme="dark">
    <v-container>
      <h4 class="text-overline text-center bg-primary">Default</h4>
      <v-timeline :direction="direction">
        <v-timeline-item v-for="(item, i) in items" :key="i" size="x-small">
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>

    <v-container>
      <h4 class="text-overline text-center bg-primary">Side on items</h4>
      <v-timeline :direction="direction">
        <v-timeline-item
          v-for="(item, i) in items"
          :key="i"
          :side="item.side"
          size="x-small"
        >
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>

    <v-container>
      <h4 class="text-overline text-center bg-primary">timeline side=start</h4>
      <v-timeline :direction="direction" side="start">
        <v-timeline-item v-for="(item, i) in items" :key="i" size="x-small">
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>

    <v-container>
      <h4 class="text-overline text-center bg-primary">timeline side=end</h4>
      <v-timeline :direction="direction" side="end">
        <v-timeline-item v-for="(item, i) in items" :key="i" size="x-small">
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>
    <v-container>
      <h4 class="text-overline text-center bg-primary">
        Side on timeline overrides side on items (start)
      </h4>
      <v-timeline :direction="direction" side="start">
        <v-timeline-item
          v-for="(item, i) in items"
          :key="i"
          :side="item.side"
          size="x-small"
        >
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>

    <v-container>
      <h4 class="text-overline text-center bg-primary">
        Side on timeline overrides side on items (end)
      </h4>
      <v-timeline :direction="direction" side="end">
        <v-timeline-item
          v-for="(item, i) in items"
          :key="i"
          :side="item.side"
          size="x-small"
        >
          <div class="d-flex ga-2">
            <v-avatar icon="mdi-check" />
            <div class="align-self-center">
              <h4>Item {{ i + 1 }}</h4>
              <div v-for="s in i" :key="s" class="text-body-2">Subtitle</div>
            </div>
          </div>
          <template #opposite>
            <div class="d-flex ga-2">
              <v-avatar icon="mdi-clock" />
              <div class="align-self-center">
                <h4>Opposite</h4>
                <div v-for="s in (3 - i)" :key="s" class="text-body-2">Subtitle</div>
              </div>
            </div>
          </template>
        </v-timeline-item>
      </v-timeline>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const items = [
    { side: 'start' },
    { side: 'start' },
    { side: 'end' },
    { side: 'end' },
  ]
  const direction = ref<'horizontal' | 'vertical'>('vertical')
</script>

<style>
  .v-application__wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .v-timeline-item__body {
    border: 1px dashed teal !important;
    .d-flex.ga-2 {
      border: 1px dashed orange !important;
    }
  }
  .v-timeline-item__opposite {
    border: 1px dashed lime !important;
    .d-flex.ga-2 {
      border: 1px dashed orange !important;
    }
  }
</style>