feat(VTimeline): side prop for individual items (#20855)

fixes #19363

Author: J-Sek

packages/api-generator/src/locale/en/VTimeline.json

@@ -8,7 +8,7 @@
     "linePosition": "Shift the position of the line. By default the line will evenly split items before/after.",
     "lineThickness": "Thickness of the timeline line.",
     "mirror": "Mirror the before/after ordering of timeline items.",
-    "side": "Display all timeline items on one side of the timeline, either **before** or **after**.",
+    "side": "Display all timeline items on one side of the timeline, either **start** or **end**.",
     "truncateLine": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends."
   }
 }

packages/api-generator/src/locale/en/VTimelineItem.json

@@ -10,7 +10,7 @@
     "iconColor": "Color of the icon.",
     "index": "Used to allow dynamically shown items to be re-inserted in the correct position.",
     "lineInset": "Specifies the distance between the line and the dot of the item.",
-    "side": "Show the item either **before** or **after** the timeline. This will override the implicit ordering of items, but will in turn be overriden by the `v-timeline` **single-side** prop.",
+    "side": "Display the item on one side of the timeline, either **start** or **end**. This will override the implicit ordering of items, unless `v-timeline` has it's own **side** prop defined.",
     "size": "Size of the item dot"
   },
   "slots": {

packages/vuetify/src/components/VTimeline/VTimeline.sass

@@ -23,7 +23,9 @@
       grid-column-gap: $timeline-item-padding
       width: 100%
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-row: 3
           padding-block-start: $timeline-item-padding
@@ -33,7 +35,9 @@
           padding-block-end: $timeline-item-padding
           align-self: flex-end
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-row: 1
           padding-block-end: $timeline-item-padding
@@ -53,7 +57,9 @@
       @include timeline-last-item()
         padding-block-end: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n)
+      .v-timeline--side-start > .v-timeline-item,
+      &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
+      &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-column: 1
           padding-inline-end: $timeline-item-padding
@@ -62,7 +68,9 @@
           grid-column: 3
           padding-inline-start: $timeline-item-padding
 
-      .v-timeline-item:nth-child(2n+1)
+      .v-timeline--side-end > .v-timeline-item,
+      &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
+      &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-column: 3
           padding-inline-start: $timeline-item-padding

packages/vuetify/src/components/VTimeline/VTimelineItem.tsx

@@ -15,9 +15,10 @@ import { ref, shallowRef, watch } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { PropType } from 'vue'
+import type { Prop, PropType } from 'vue'
 
 // Types
+export type TimelineItemSide = 'start' | 'end' | undefined
 export type VTimelineItemSlots = {
   default: never
   icon: never
@@ -36,6 +37,10 @@ export const makeVTimelineItemProps = propsFactory({
   icon: IconValue,
   iconColor: String,
   lineInset: [Number, String],
+  side: {
+    type: String,
+    validator: (v: any) => v == null || ['start', 'end'].includes(v),
+  } as Prop<TimelineItemSide>,
 
   ...makeComponentProps(),
   ...makeDimensionProps(),
@@ -68,6 +73,8 @@ export const VTimelineItem = genericComponent<VTimelineItemSlots>()({
           'v-timeline-item',
           {
             'v-timeline-item--fill-dot': props.fillDot,
+            'v-timeline-item--side-start': props.side === 'start',
+            'v-timeline-item--side-end': props.side === 'end',
           },
           props.class,
         ]}