@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VTimeline/VTimeline.css

@@ -1,4 +1,7 @@
 .v-timeline .v-timeline-divider__dot {
+  background: rgb(var(--v-theme-on-surface-variant));
+}
+.v-timeline .v-timeline-divider__inner-dot {
   background: rgb(var(--v-theme-on-surface));
 }
 
@@ -8,39 +11,47 @@
   position: relative;
 }
 .v-timeline--horizontal.v-timeline {
-  grid-template-rows: auto min-content auto;
+  grid-column-gap: 24px;
   width: 100%;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item__opposite {
-  padding-inline-start: calc(var(--v-timeline-dot-size) / 2 - 5px);
+.v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-divider, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite {
+  padding-inline-start: 24px;
+}
+.v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-divider, .v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite {
+  padding-inline-end: 24px;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
   grid-row: 3;
-  padding-top: 24px;
+  padding-block-start: 24px;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
   grid-row: 1;
-  padding-bottom: 24px;
+  padding-block-end: 24px;
+  align-self: flex-end;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
   grid-row: 1;
-  padding-bottom: 24px;
+  padding-block-end: 24px;
+  align-self: flex-end;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
   grid-row: 3;
-  padding-top: 24px;
+  padding-block-start: 24px;
 }
 
 .v-timeline--vertical.v-timeline {
-  grid-template-columns: auto min-content auto;
+  grid-row-gap: 24px;
   height: 100%;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item__opposite {
-  padding-top: calc((var(--v-timeline-dot-size) - 1.5em) / 2);
+.v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite {
+  padding-block-start: 24px;
+}
+.v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite {
+  padding-block-end: 24px;
 }
 .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
   grid-column: 1;
-  text-align: end;
+  justify-self: flex-end;
   padding-inline-end: 24px;
 }
 .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
@@ -53,7 +64,7 @@
 }
 .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
   grid-column: 1;
-  text-align: end;
+  justify-self: flex-end;
   padding-inline-end: 24px;
 }
 
@@ -61,53 +72,125 @@
   display: contents;
 }
 
-.v-timeline-divider__line {
+.v-timeline-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.v-timeline--horizontal .v-timeline-divider {
+  flex-direction: row;
+  grid-row: 2;
+  width: 100%;
+}
+
+.v-timeline--vertical .v-timeline-divider {
+  height: 100%;
+  flex-direction: column;
+  grid-column: 2;
+}
+
+.v-timeline-divider__before {
   background: rgba(var(--v-border-color), var(--v-border-opacity));
   position: absolute;
 }
-.v-timeline--horizontal .v-timeline-divider__line {
+.v-timeline--horizontal .v-timeline-divider__before {
   height: var(--v-timeline-line-thickness);
-  width: calc(100% - var(--v-timeline-line-inset, 0px));
+  width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal .v-timeline-divider__before.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-divider__before {
+  left: -12px;
+  right: initial;
+}
+.v-timeline--horizontal .v-timeline-divider__before.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-divider__before {
+  right: -12px;
+  left: initial;
 }
 
-.v-timeline--vertical .v-timeline-divider__line {
-  height: 100%;
+.v-timeline--vertical .v-timeline-divider__before {
+  height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
   width: var(--v-timeline-line-thickness);
+  top: -12px;
 }
 
-.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
-  height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset));
-  bottom: calc(var(--v-timeline-line-inset) / 2);
+.v-timeline-divider__after {
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+  position: absolute;
+}
+.v-timeline--horizontal .v-timeline-divider__after {
+  height: var(--v-timeline-line-thickness);
+  width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal .v-timeline-divider__after.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-divider__after {
+  right: -12px;
+  left: initial;
+}
+.v-timeline--horizontal .v-timeline-divider__after.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-divider__after {
+  left: -12px;
+  right: initial;
 }
 
-.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
-  width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset));
-  inset-inline-end: calc(var(--v-timeline-line-inset) / 2);
+.v-timeline--vertical .v-timeline-divider__after {
+  height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+  width: var(--v-timeline-line-thickness);
+  bottom: -12px;
 }
 
-.v-timeline--vertical.v-timeline:not(.v-timeline--inset-line) .v-timeline-item:first-child .v-timeline-divider__line {
-  bottom: 0;
-  height: calc(100% - var(--v-timeline-dot-size) / 2);
+.v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__before {
+  height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+  top: 0;
 }
 
-.v-timeline--horizontal.v-timeline:not(.v-timeline--inset-line) .v-timeline-item:first-child .v-timeline-divider__line {
-  width: calc(100% - var(--v-timeline-dot-size) / 2);
-  inset-inline-end: 0;
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before {
+  width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before {
+  left: 0;
+  right: initial;
+}
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before {
+  right: 0;
+  left: initial;
 }
 
-.v-timeline-divider {
-  position: relative;
-  display: flex;
-  align-items: center;
+.v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__after {
+  height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
 }
-.v-timeline--horizontal .v-timeline-divider {
-  flex-direction: row;
-  grid-row: 2;
+
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after {
+  width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
+}
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after {
+  right: -12px;
+  left: initial;
+}
+.v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after {
+  left: -12px;
+  right: initial;
 }
 
-.v-timeline--vertical .v-timeline-divider {
-  flex-direction: column;
-  grid-column: 2;
+.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__before {
+  height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
+}
+
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__before {
+  width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset));
+}
+
+.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__after {
+  height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+  bottom: 0;
+}
+
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after {
+  width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after {
+  right: 0;
+  left: initial;
+}
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after {
+  left: 0;
+  right: initial;
 }
 
 .v-timeline-divider__dot {
@@ -117,7 +200,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-timeline-divider__dot--size-x-small {
   height: 22px;
@@ -168,6 +251,22 @@
 }
 
 /** Modifiers **/
+.v-timeline--horizontal.v-timeline--justify-center {
+  grid-template-rows: minmax(auto, 50%) min-content minmax(auto, 50%);
+}
+
+.v-timeline--vertical.v-timeline--justify-center {
+  grid-template-columns: minmax(auto, 50%) min-content minmax(auto, 50%);
+}
+
+.v-timeline--horizontal.v-timeline--justify-auto {
+  grid-template-rows: auto min-content auto;
+}
+
+.v-timeline--vertical.v-timeline--justify-auto {
+  grid-template-columns: auto min-content auto;
+}
+
 .v-timeline--horizontal.v-timeline--density-comfortable {
   height: 100%;
 }
@@ -189,20 +288,20 @@
 }
 
 .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-end {
-  grid-template-rows: min-content auto;
+  grid-template-rows: 0 min-content auto;
 }
 .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-start {
-  grid-template-rows: auto min-content;
+  grid-template-rows: auto min-content 0;
 }
 .v-timeline--horizontal.v-timeline--density-compact .v-timeline-item__body {
   grid-row: 1;
 }
 
 .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-end {
-  grid-template-columns: min-content auto;
+  grid-template-columns: 0 min-content auto;
 }
 .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-start {
-  grid-template-columns: auto min-content;
+  grid-template-columns: auto min-content 0;
 }
 .v-timeline--vertical.v-timeline--density-compact .v-timeline-item__body {
   grid-column: 3;
@@ -210,44 +309,48 @@
 
 .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
   grid-row: 3;
-  padding-bottom: initial;
-  padding-top: 24px;
+  padding-block-end: initial;
+  padding-block-start: 24px;
 }
 .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
   grid-row: 1;
-  padding-bottom: 24px;
-  padding-top: initial;
+  padding-block-end: 24px;
+  padding-block-start: initial;
 }
 
 .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
   grid-column: 3;
-  text-align: initial;
   padding-inline-start: 24px;
+  padding-inline-end: initial;
+  justify-self: flex-start;
 }
 .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
   grid-column: 1;
+  justify-self: flex-end;
   padding-inline-end: 24px;
+  padding-inline-start: initial;
 }
 
 .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
   grid-row: 1;
-  padding-bottom: 24px;
-  padding-top: initial;
+  padding-block-end: 24px;
+  padding-block-start: initial;
 }
 .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
   grid-row: 3;
-  padding-bottom: initial;
-  padding-top: 24px;
+  padding-block-end: initial;
+  padding-block-start: 24px;
 }
 
 .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
   grid-column: 1;
-  text-align: end;
+  justify-self: flex-end;
   padding-inline-end: 24px;
 }
 .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
   grid-column: 3;
   padding-inline-start: 24px;
+  justify-self: flex-start;
 }
 
 .v-timeline-divider--fill-dot .v-timeline-divider__inner-dot {
@@ -255,6 +358,89 @@
   width: inherit;
 }
 
-.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
+.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__before {
   display: none;
+}
+
+.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__after {
+  display: none;
+}
+
+.v-timeline--align-center {
+  --v-timeline-line-size-base: 50%;
+  --v-timeline-line-size-offset: 0px;
+}
+.v-timeline--horizontal.v-timeline--align-center {
+  justify-items: center;
+}
+.v-timeline--horizontal.v-timeline--align-center .v-timeline-divider {
+  justify-content: center;
+}
+
+.v-timeline--vertical.v-timeline--align-center {
+  align-items: center;
+}
+.v-timeline--vertical.v-timeline--align-center .v-timeline-divider {
+  justify-content: center;
+}
+
+.v-timeline--align-start {
+  --v-timeline-line-size-base: 100%;
+  --v-timeline-line-size-offset: 12px;
+}
+.v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__before {
+  --v-timeline-line-size-offset: 24px;
+}
+.v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__after {
+  --v-timeline-line-size-offset: -12px;
+}
+.v-timeline--align-start .v-timeline-item:last-child .v-timeline-divider__after {
+  --v-timeline-line-size-offset: 0px;
+}
+.v-timeline--horizontal.v-timeline--align-start {
+  justify-items: flex-start;
+}
+.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider {
+  justify-content: flex-start;
+}
+.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before {
+  width: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after {
+  width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset));
+}
+
+.v-timeline--vertical.v-timeline--align-start {
+  align-items: flex-start;
+}
+.v-timeline--vertical.v-timeline--align-start .v-timeline-divider {
+  justify-content: flex-start;
+}
+.v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before {
+  height: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset));
+}
+.v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after {
+  height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset));
+}
+
+.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__after {
+  --v-timeline-line-size-offset: 12px;
+}
+.v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite {
+  padding-block-start: 0;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite {
+  padding-inline-start: 0;
+}
+
+.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__before {
+  --v-timeline-line-size-offset: 12px;
+}
+.v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite {
+  padding-block-end: 0;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite {
+  padding-inline-end: 0;
 }

package/lib/components/VTimeline/VTimeline.mjs

@@ -1,25 +1,33 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VTimeline.css"; // Components
+import "./VTimeline.css"; // Composables
 
-import { VTimelineItem } from "./VTimelineItem.mjs"; // Composables
-
-import { makeTagProps } from "../../composables/tag.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
-import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Helpers
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-import { computed, provide, toRef } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
-import { VTimelineSymbol } from "./shared.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
 
 export const VTimeline = defineComponent({
   name: 'VTimeline',
   props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
     direction: {
       type: String,
       default: 'vertical',
       validator: v => ['vertical', 'horizontal'].includes(v)
     },
+    justify: {
+      type: String,
+      default: 'auto',
+      validator: v => ['auto', 'center'].includes(v)
+    },
     side: {
       type: String,
       validator: v => v == null || ['start', 'end'].includes(v)
@@ -35,8 +43,7 @@ export const VTimeline = defineComponent({
     lineColor: String,
     truncateLine: {
       type: String,
-      default: 'start',
-      validator: v => ['none', 'start', 'end', 'both'].includes(v)
+      validator: v => ['start', 'end', 'both'].includes(v)
     },
     ...makeDensityProps(),
     ...makeTagProps(),
@@ -53,32 +60,45 @@ export const VTimeline = defineComponent({
     const {
       densityClasses
     } = useDensity(props);
-    provide(VTimelineSymbol, {
-      density: toRef(props, 'density'),
-      lineColor: toRef(props, 'lineColor')
+    provideDefaults({
+      VTimelineDivider: {
+        lineColor: toRef(props, 'lineColor')
+      },
+      VTimelineItem: {
+        density: toRef(props, 'density'),
+        lineInset: toRef(props, 'lineInset')
+      }
     });
-    const sideClass = computed(() => {
+    const sideClasses = computed(() => {
       const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
       return side && `v-timeline--side-${side}`;
     });
-    return () => {
-      var _slots$default;
+    const truncateClasses = computed(() => {
+      const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
+
+      switch (props.truncateLine) {
+        case 'both':
+          return classes;
+
+        case 'start':
+          return classes[0];
 
-      return _createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, {
-          'v-timeline--inset-line': !!props.lineInset,
-          'v-timeline--truncate-line-end': props.truncateLine === 'end' || props.truncateLine === 'both'
-        }, themeClasses.value, densityClasses.value, sideClass.value],
-        "style": {
-          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
-          '--v-timeline-line-inset': convertToUnit(props.lineInset)
-        }
-      }, {
-        default: () => [(props.truncateLine === 'none' || props.truncateLine === 'end') && _createVNode(VTimelineItem, {
-          "hideDot": true
-        }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-      });
-    };
+        case 'end':
+          return classes[1];
+
+        default:
+          return null;
+      }
+    });
+    useRender(() => _createVNode(props.tag, {
+      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
+        'v-timeline--inset-line': !!props.lineInset
+      }, themeClasses.value, densityClasses.value, sideClasses.value],
+      "style": {
+        '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
+      }
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VTimeline/VTimeline.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"names":["VTimelineItem","makeTagProps","makeDensityProps","useDensity","makeThemeProps","provideTheme","computed","provide","toRef","convertToUnit","defineComponent","VTimelineSymbol","VTimeline","name","props","direction","type","String","default","validator","v","includes","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","value"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,a,+BAET;;SACSC,Y;SACAC,gB,EAAkBC,U;SAClBC,c,EAAgBC,Y,uCAEzB;;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,KAA5B,QAAyC,KAAzC;SACSC,a,EAAeC,e;SACfC,e,wBAET;;AAMA,OAAO,MAAMC,SAAS,GAAGF,eAAe,CAAC;AACvCG,EAAAA,IAAI,EAAE,WADiC;AAGvCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE;AACTC,MAAAA,IAAI,EAAEC,MADG;AAETC,MAAAA,OAAO,EAAE,UAFA;AAGTC,MAAAA,SAAS,EAAGC,CAAD,IAAY,CAAC,UAAD,EAAa,YAAb,EAA2BC,QAA3B,CAAoCD,CAApC;AAHd,KADN;AAMLE,IAAAA,IAAI,EAAE;AACJN,MAAAA,IAAI,EAAEC,MADF;AAEJE,MAAAA,SAAS,EAAGC,CAAD,IAAYA,CAAC,IAAI,IAAL,IAAa,CAAC,OAAD,EAAU,KAAV,EAAiBC,QAAjB,CAA0BD,CAA1B;AAFhC,KAND;AAULG,IAAAA,SAAS,EAAE;AACTP,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASO,MAAT,CADG;AAETN,MAAAA,OAAO,EAAE;AAFA,KAVN;AAcLO,IAAAA,aAAa,EAAE;AACbT,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASO,MAAT,CADO;AAEbN,MAAAA,OAAO,EAAE;AAFI,KAdV;AAkBLQ,IAAAA,SAAS,EAAET,MAlBN;AAmBLU,IAAAA,YAAY,EAAE;AACZX,MAAAA,IAAI,EAAEC,MADM;AAEZC,MAAAA,OAAO,EAAE,OAFG;AAGZC,MAAAA,SAAS,EAAGC,CAAD,IAAY,CAAC,MAAD,EAAS,OAAT,EAAkB,KAAlB,EAAyB,MAAzB,EAAiCC,QAAjC,CAA0CD,CAA1C;AAHX,KAnBT;AAyBL,OAAGlB,gBAAgB,EAzBd;AA0BL,OAAGD,YAAY,EA1BV;AA2BL,OAAGG,cAAc;AA3BZ,GAHgC;;AAiCvCwB,EAAAA,KAAK,CAAEd,KAAF,QAAoB;AAAA,QAAX;AAAEe,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBzB,YAAY,CAACS,KAAD,CAArC;AACA,UAAM;AAAEiB,MAAAA;AAAF,QAAqB5B,UAAU,CAACW,KAAD,CAArC;AAEAP,IAAAA,OAAO,CAACI,eAAD,EAAkB;AACvBqB,MAAAA,OAAO,EAAExB,KAAK,CAACM,KAAD,EAAQ,SAAR,CADS;AAEvBY,MAAAA,SAAS,EAAElB,KAAK,CAACM,KAAD,EAAQ,WAAR;AAFO,KAAlB,CAAP;AAKA,UAAMmB,SAAS,GAAG3B,QAAQ,CAAC,MAAM;AAC/B,YAAMgB,IAAI,GAAGR,KAAK,CAACQ,IAAN,GAAaR,KAAK,CAACQ,IAAnB,GAA0BR,KAAK,CAACkB,OAAN,KAAkB,SAAlB,GAA8B,KAA9B,GAAsC,IAA7E;AAEA,aAAOV,IAAI,IAAK,oBAAmBA,IAAK,EAAxC;AACD,KAJyB,CAA1B;AAMA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,YADK,EAEJ,eAAcR,KAAK,CAACC,SAAU,EAF1B,EAGL;AACE,oCAA0B,CAAC,CAACD,KAAK,CAACS,SADpC;AAEE,2CAAiCT,KAAK,CAACa,YAAN,KAAuB,KAAvB,IAAgCb,KAAK,CAACa,YAAN,KAAuB;AAF1F,SAHK,EAOLG,YAAY,CAACI,KAPR,EAQLH,cAAc,CAACG,KARV,EASLD,SAAS,CAACC,KATL,CAFJ;AAAA,iBAaI;AACL,yCAA+BzB,aAAa,CAACK,KAAK,CAACW,aAAP,CADvC;AAEL,qCAA2BhB,aAAa,CAACK,KAAK,CAACS,SAAP;AAFnC;AAbJ;AAAA,wBAkBD,CAACT,KAAK,CAACa,YAAN,KAAuB,MAAvB,IAAiCb,KAAK,CAACa,YAAN,KAAuB,KAAzD;AAAA;AAAA,gBAlBC,oBAsBDE,KAAK,CAACX,OAtBL,qBAsBD,oBAAAW,KAAK,CAtBJ;AAAA;AAAA,KAAP;AAyBD;;AAzEsC,CAAD,CAAjC","sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Components\nimport { VTimelineItem } from './VTimelineItem'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Helpers\nimport { computed, provide, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { VTimelineSymbol } from './shared'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'before' | 'after' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      default: 'start',\n      validator: (v: any) => ['none', 'start', 'end', 'both'].includes(v),\n    },\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provide(VTimelineSymbol, {\n      density: toRef(props, 'density'),\n      lineColor: toRef(props, 'lineColor'),\n    })\n\n    const sideClass = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n            'v-timeline--truncate-line-end': props.truncateLine === 'end' || props.truncateLine === 'both',\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClass.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          '--v-timeline-line-inset': convertToUnit(props.lineInset),\n        }}\n      >\n        { (props.truncateLine === 'none' || props.truncateLine === 'end') && (\n          <VTimelineItem hideDot />\n        ) }\n\n        { slots.default?.() }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VTimeline.mjs"}
+{"version":3,"file":"VTimeline.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","convertToUnit","defineComponent","useRender","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","justify","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    justify: {\n      type: String,\n      default: 'auto',\n      validator: (v: any) => ['auto', 'center'].includes(v),\n    },\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        lineInset: toRef(props, 'lineInset'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n        }}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}