@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VTimeline/VTimeline.css

@@ -0,0 +1,399 @@
+.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));
+}
+
+.v-timeline {
+  display: grid;
+  grid-auto-flow: dense;
+  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:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-divider {
+  padding-inline-start: 24px;
+}
+.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, .v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-divider {
+  padding-inline-end: 24px;
+}
+.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
+  grid-row: 3;
+  padding-block-start: 24px;
+}
+.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
+  grid-row: 1;
+  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-block-end: 24px;
+}
+.v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
+  grid-row: 3;
+  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: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-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider {
+  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;
+  padding-inline-end: 24px;
+}
+.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
+  grid-column: 3;
+  padding-inline-start: 24px;
+}
+.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
+  grid-column: 3;
+  padding-inline-start: 24px;
+}
+.v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
+  grid-column: 1;
+  text-align: end;
+  padding-inline-end: 24px;
+}
+
+.v-timeline-item {
+  display: contents;
+}
+
+.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__line {
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+  position: absolute;
+}
+.v-timeline--horizontal .v-timeline-divider__line {
+  height: var(--v-timeline-line-thickness);
+  width: calc(100% + 24px);
+}
+.v-timeline--horizontal .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-divider__line {
+  left: 0;
+}
+.v-timeline--horizontal .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-divider__line {
+  right: 0;
+}
+
+.v-timeline--vertical .v-timeline-divider__line {
+  height: calc(100% + 24px);
+  width: var(--v-timeline-line-thickness);
+}
+.v-timeline--vertical .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical .v-timeline-divider__line {
+  top: 0;
+}
+.v-timeline--vertical .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical .v-timeline-divider__line {
+  bottom: 0;
+}
+
+.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__line {
+  height: 100%;
+}
+
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 100%;
+}
+
+.v-timeline-divider__dot {
+  z-index: 1;
+  flex-shrink: 0;
+  border-radius: 50%;
+  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);
+}
+.v-timeline-divider__dot--size-x-small {
+  height: 22px;
+  width: 22px;
+}
+.v-timeline-divider__dot--size-x-small .v-timeline-divider__inner-dot {
+  height: calc(100% - 6px);
+  width: calc(100% - 6px);
+}
+.v-timeline-divider__dot--size-small {
+  height: 30px;
+  width: 30px;
+}
+.v-timeline-divider__dot--size-small .v-timeline-divider__inner-dot {
+  height: calc(100% - 8px);
+  width: calc(100% - 8px);
+}
+.v-timeline-divider__dot--size-default {
+  height: 38px;
+  width: 38px;
+}
+.v-timeline-divider__dot--size-default .v-timeline-divider__inner-dot {
+  height: calc(100% - 8px);
+  width: calc(100% - 8px);
+}
+.v-timeline-divider__dot--size-large {
+  height: 46px;
+  width: 46px;
+}
+.v-timeline-divider__dot--size-large .v-timeline-divider__inner-dot {
+  height: calc(100% - 8px);
+  width: calc(100% - 8px);
+}
+.v-timeline-divider__dot--size-x-large {
+  height: 54px;
+  width: 54px;
+}
+.v-timeline-divider__dot--size-x-large .v-timeline-divider__inner-dot {
+  height: calc(100% - 10px);
+  width: calc(100% - 10px);
+}
+
+.v-timeline-divider__inner-dot {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+}
+
+/** Modifiers **/
+.v-timeline--horizontal.v-timeline--density-comfortable {
+  height: 100%;
+}
+.v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-end {
+  grid-template-rows: min-content min-content auto;
+}
+.v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-start {
+  grid-template-rows: auto min-content min-content;
+}
+
+.v-timeline--vertical.v-timeline--density-comfortable {
+  width: 100%;
+}
+.v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-end {
+  grid-template-columns: min-content min-content auto;
+}
+.v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-start {
+  grid-template-columns: auto min-content min-content;
+}
+
+.v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-end {
+  grid-template-rows: min-content auto;
+}
+.v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-start {
+  grid-template-rows: auto min-content;
+}
+.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;
+}
+.v-timeline--vertical.v-timeline--density-compact.v-timeline--side-start {
+  grid-template-columns: auto min-content;
+}
+.v-timeline--vertical.v-timeline--density-compact .v-timeline-item__body {
+  grid-column: 3;
+}
+
+.v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
+  grid-row: 3;
+  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-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;
+}
+.v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
+  grid-column: 1;
+  text-align: 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-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-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;
+  padding-inline-end: 24px;
+}
+.v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
+  grid-column: 3;
+  text-align: initial;
+  padding-inline-start: 24px;
+}
+
+.v-timeline-divider--fill-dot .v-timeline-divider__inner-dot {
+  height: inherit;
+  width: inherit;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 50%;
+}
+
+.v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
+  height: 24px;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-end.v-timeline--align-start .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 24px;
+}
+
+.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, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider {
+  padding-inline-start: 0;
+}
+
+.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, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider {
+  padding-block-start: 0;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  width: calc(50% + var(--v-timeline-dot-size));
+}
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  left: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  right: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  height: calc(50% + var(--v-timeline-dot-size));
+}
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  top: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  bottom: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+
+.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--horizontal .v-timeline--align-start {
+  justify-content: flex-start;
+}
+
+.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--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  width: calc(100% + 24px - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  height: calc(100% + 24px - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  width: calc(50% - 24px - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  height: calc(50% - 24px - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}

package/lib/components/VTimeline/VTimeline.mjs

@@ -1,20 +1,23 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VTimeline.sass"; // Components
-
-import VTimelineItem from "./VTimelineItem.mjs"; // Composables
+import "./VTimeline.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs"; // Helpers
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Helpers
 
-import { computed, defineComponent, provide, toRef } from 'vue';
-import { convertToUnit, makeProps } from "../../util/index.mjs"; // Types
+import { computed, provide, toRef } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { VTimelineSymbol } from "./shared.mjs"; // Types
 
-export const VTimelineSymbol = Symbol.for('vuetify:timeline');
-export default defineComponent({
+export const VTimeline = defineComponent({
   name: 'VTimeline',
-  props: makeProps({
+  props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
     direction: {
       type: String,
       default: 'vertical',
@@ -35,23 +38,23 @@ export default 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(),
     ...makeThemeProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       densityClasses
-    } = useDensity(props, 'v-timeline');
+    } = useDensity(props);
     provide(VTimelineSymbol, {
       density: toRef(props, 'density'),
       lineColor: toRef(props, 'lineColor')
@@ -60,24 +63,37 @@ export default defineComponent({
       const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
       return side && `v-timeline--side-${side}`;
     });
+    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];
+
+        case 'end':
+          return classes[1];
+
+        default:
+          return null;
+      }
+    });
     return () => {
       var _slots$default;
 
       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'
+        "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, !props.lineInset && truncateClasses.value, {
+          'v-timeline--inset-line': !!props.lineInset
         }, themeClasses.value, densityClasses.value, sideClass.value],
         "style": {
           '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
-          '--v-timeline-line-inset': convertToUnit(props.lineInset || undefined)
+          '--v-timeline-line-inset': convertToUnit(props.lineInset)
         }
       }, {
-        default: () => [(props.truncateLine === 'none' || props.truncateLine === 'end') && _createVNode(VTimelineItem, {
-          "hideDot": true
-        }, null, 8, ["hideDot"]), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)],
-        _: 1
-      }, 8, ["class", "style"]);
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+      });
     };
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"names":["VTimelineItem","makeTagProps","makeDensityProps","useDensity","makeThemeProps","useTheme","computed","defineComponent","provide","toRef","convertToUnit","makeProps","VTimelineSymbol","Symbol","for","name","props","direction","type","String","default","validator","v","includes","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","value","undefined"],"mappings":"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","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, useTheme } from '@/composables/theme'\n\n// Helpers\nimport { computed, defineComponent, provide, toRef } from 'vue'\nimport { convertToUnit, makeProps } from '@/util'\n\n// Types\nimport type { InjectionKey, Prop, Ref } from 'vue'\nimport type { Density } from '@/composables/density'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'before' | 'after' | undefined\n\ninterface TimelineInstance {\n  density: Ref<Density>\n  lineColor: Ref<string>\n}\n\nexport const VTimelineSymbol: InjectionKey<TimelineInstance> = Symbol.for('vuetify:timeline')\n\nexport default defineComponent({\n  name: 'VTimeline',\n\n  props: makeProps({\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    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme(props)\n    const { densityClasses } = useDensity(props, 'v-timeline')\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 || undefined),\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":["makeTagProps","makeDensityProps","useDensity","makeThemeProps","provideTheme","computed","provide","toRef","convertToUnit","defineComponent","VTimelineSymbol","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\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 = '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    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    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    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    return () => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          !props.lineInset && truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\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        { slots.default?.() }\n      </props.tag>\n    )\n  },\n})\n"],"mappings":"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"}