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

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));
 }
 
@@ -9,34 +12,43 @@
 }
 .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-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-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;
 }
 .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-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;
@@ -61,53 +73,55 @@
   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% - var(--v-timeline-line-inset, 0px));
+  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: 100%;
+  height: calc(100% + 24px);
   width: var(--v-timeline-line-thickness);
 }
-
-.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--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__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical .v-timeline-divider__line {
+  top: 0;
 }
-
-.v-timeline--vertical.v-timeline:not(.v-timeline--inset-line) .v-timeline-item:first-child .v-timeline-divider__line {
+.v-timeline--vertical .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical .v-timeline-divider__line {
   bottom: 0;
-  height: calc(100% - var(--v-timeline-dot-size) / 2);
-}
-
-.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-divider {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.v-timeline--horizontal .v-timeline-divider {
-  flex-direction: row;
-  grid-row: 2;
+.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__line {
+  height: 100%;
 }
 
-.v-timeline--vertical .v-timeline-divider {
-  flex-direction: column;
-  grid-column: 2;
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 100%;
 }
 
 .v-timeline-divider__dot {
@@ -210,34 +224,37 @@
 
 .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;
 }
 .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-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 {
@@ -247,6 +264,7 @@
 }
 .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;
 }
 
@@ -255,6 +273,127 @@
   width: inherit;
 }
 
-.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
-  display: none;
+.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,8 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VTimeline.css"; // Components
-
-import { VTimelineItem } from "./VTimelineItem.mjs"; // Composables
+import "./VTimeline.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
@@ -15,6 +13,11 @@ import { VTimelineSymbol } from "./shared.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',
@@ -35,8 +38,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(),
@@ -61,22 +63,36 @@ export const VTimeline = 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)
         }
       }, {
-        default: () => [(props.truncateLine === 'none' || props.truncateLine === 'end') && _createVNode(VTimelineItem, {
-          "hideDot": true
-        }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+        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","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":"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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, 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":["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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"}