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

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,45 +1,100 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VTimeline.sass"; // Types
+import "./VTimeline.css"; // Composables
 
-import mixins from "../../util/mixins.mjs"; // Mixins
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Helpers
 
-import Themeable from "../../mixins/themeable/index.mjs";
-export default mixins(Themeable
-/* @vue/component */
-).extend({
-  name: 'v-timeline',
-
-  provide() {
-    return {
-      timeline: this
-    };
-  },
+import { computed, provide, toRef } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { VTimelineSymbol } from "./shared.mjs"; // Types
 
+export const VTimeline = defineComponent({
+  name: 'VTimeline',
   props: {
-    alignTop: Boolean,
-    dense: Boolean,
-    reverse: Boolean
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    side: {
+      type: String,
+      validator: v => v == null || ['start', 'end'].includes(v)
+    },
+    lineInset: {
+      type: [String, Number],
+      default: 0
+    },
+    lineThickness: {
+      type: [String, Number],
+      default: 2
+    },
+    lineColor: String,
+    truncateLine: {
+      type: String,
+      validator: v => ['start', 'end', 'both'].includes(v)
+    },
+    ...makeDensityProps(),
+    ...makeTagProps(),
+    ...makeThemeProps()
   },
-  computed: {
-    classes() {
-      return {
-        'v-timeline--align-top': this.alignTop,
-        'v-timeline--dense': this.dense,
-        'v-timeline--reverse': this.reverse,
-        ...this.themeClasses
-      };
-    }
 
-  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    provide(VTimelineSymbol, {
+      density: toRef(props, 'density'),
+      lineColor: toRef(props, 'lineColor')
+    });
+    const sideClass = computed(() => {
+      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'];
 
-  render(h) {
-    return h('div', {
-      staticClass: 'v-timeline',
-      class: this.classes
-    }, this.$slots.default);
+      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--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: () => [(_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.ts"],"names":["mixins","Themeable","extend","name","provide","timeline","props","alignTop","Boolean","dense","reverse","computed","classes","themeClasses","render","h","staticClass","class","$slots","default"],"mappings":"AAAA;;AACA;AAEA;AACA,0B,CAEA;;OAEOA,M,+BAEP;;OACOC,S;AAEP,eAAeD,MAAM,CACnBC;AACF;AAFqB,CAAN,CAGbC,MAHa,CAGN;AACPC,EAAAA,IAAI,EAAE,YADC;;AAGPC,EAAAA,OAAO,GAAY;AACjB,WAAO;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAP;AACD,GALM;;AAOPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,KAAK,EAAED,OAFF;AAGLE,IAAAA,OAAO,EAAEF;AAHJ,GAPA;AAaPG,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAQ;AACb,aAAO;AACL,iCAAyB,KAAKL,QADzB;AAEL,6BAAqB,KAAKE,KAFrB;AAGL,+BAAuB,KAAKC,OAHvB;AAIL,WAAG,KAAKG;AAJH,OAAP;AAMD;;AARO,GAbH;;AAwBPC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ;AACdC,MAAAA,WAAW,EAAE,YADC;AAEdC,MAAAA,KAAK,EAAE,KAAKL;AAFE,KAAR,EAGL,KAAKM,MAAL,CAAYC,OAHP,CAAR;AAID;;AA7BM,CAHM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VTimeline.sass'\n\n// Types\nimport { VNode } from 'vue'\nimport mixins from '../../util/mixins'\n\n// Mixins\nimport Themeable from '../../mixins/themeable'\n\nexport default mixins(\n  Themeable\n/* @vue/component */\n).extend({\n  name: 'v-timeline',\n\n  provide (): object {\n    return { timeline: this }\n  },\n\n  props: {\n    alignTop: Boolean,\n    dense: Boolean,\n    reverse: Boolean,\n  },\n\n  computed: {\n    classes (): {} {\n      return {\n        'v-timeline--align-top': this.alignTop,\n        'v-timeline--dense': this.dense,\n        'v-timeline--reverse': this.reverse,\n        ...this.themeClasses,\n      }\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-timeline',\n      class: this.classes,\n    }, this.$slots.default)\n  },\n})\n"],"file":"VTimeline.mjs"}
+{"version":3,"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"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"],"mappings":"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","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"],"file":"VTimeline.mjs"}