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

package/lib/components/VTimeline/VTimeline.sass

@@ -1,160 +1,392 @@
-// Imports
-@import './_variables.scss'
-@import './_mixins.sass'
+@forward './variables'
+@use 'sass:map'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+@use './mixins' as *
 
 // Theme
-+theme(v-timeline) using ($material)
-  &::before
-    background: map-get($material, 'dividers')
-
-  .v-timeline-item
-    &__dot
-      background: map-get($material, 'cards')
+.v-timeline
+  .v-timeline-divider__dot
+    background: $timeline-dot-divider-background
 
-    .v-card
-      &::before
-        border-right-color: $shadow-key-ambient-opacity
+  .v-timeline-divider__inner-dot
+    background: $timeline-inner-dot-divider-background
 
 // Elements
 .v-timeline
-  padding-top: $timeline-item-padding
+  display: grid
+  grid-auto-flow: dense
   position: relative
 
-  &:before
-    bottom: 0
-    content: ''
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template
+    grid-column-gap: $timeline-item-padding
+    width: 100%
+
+    .v-timeline-item:first-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-inline-start: $timeline-item-padding
+
+    .v-timeline-item:last-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-inline-end: $timeline-item-padding
+
+    .v-timeline-item:nth-child(2n)
+      .v-timeline-item__body
+        grid-row: 3
+        padding-block-start: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-row: 1
+        padding-block-end: $timeline-item-padding
+        align-self: flex-end
+
+    .v-timeline-item:nth-child(2n+1)
+      .v-timeline-item__body
+        grid-row: 1
+        padding-block-end: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-row: 3
+        padding-block-start: $timeline-item-padding
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template
+    grid-row-gap: $timeline-item-padding
     height: 100%
-    position: absolute
-    top: 0
-    width: $timeline-line-width
 
-.v-timeline-item
-  display: flex
-  padding-bottom: $timeline-item-padding
+    .v-timeline-item:first-child
+      .v-timeline-divider, .v-timeline-item__body, .v-timeline-item__opposite
+        padding-block-start: $timeline-item-padding
 
-.v-timeline-item__body
-  position: relative
-  height: 100%
-  flex: 1 1 auto
+    .v-timeline-item:last-child
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-block-end: $timeline-item-padding
+
+    .v-timeline-item:nth-child(2n)
+      .v-timeline-item__body
+        grid-column: 1
+        text-align: end
+        padding-inline-end: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-column: 3
+        padding-inline-start: $timeline-item-padding
+
+    .v-timeline-item:nth-child(2n+1)
+      .v-timeline-item__body
+        grid-column: 3
+        padding-inline-start: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-column: 1
+        text-align: end
+        padding-inline-end: $timeline-item-padding
 
-.v-timeline-item__divider
+.v-timeline-item
+  display: contents
+
+.v-timeline-divider
   position: relative
-  min-width: $timeline-divider-width
   display: flex
   align-items: center
+
+  @include horizontal
+    flex-direction: row
+    grid-row: 2
+    width: 100%
+
+  @include vertical
+    height: 100%
+    flex-direction: column
+    grid-column: 2
+
+.v-timeline-divider__line
+  background: $timeline-divider-line-background
+  position: absolute
+
+  @include horizontal
+    height: $timeline-divider-line-thickness
+    width: calc(100% + #{$timeline-item-padding})
+
+    @include tools.ltr
+      left: 0
+    @include tools.rtl
+      right: 0
+
+  @include vertical
+    height: calc(100% + #{$timeline-item-padding})
+    width: $timeline-divider-line-thickness
+
+    @include tools.ltr
+      top: 0
+    @include tools.rtl
+      bottom: 0
+
+.v-timeline-item:last-child
+  .v-timeline-divider__line
+    @include vertical
+      height: 100%
+
+    @include horizontal
+      width: 100%
+
+.v-timeline-divider__dot
+  z-index: 1
+  flex-shrink: 0
+  border-radius: $timeline-dot-border-radius
+  display: flex
   justify-content: center
+  align-items: center
+
+  @include tools.elevation($timeline-divider-dot-elevation)
 
-.v-timeline-item__dot
-  z-index: 2
-  border-radius: 50%
-  +elevation(1)
-  +timeline-dots($timeline-dot-regular-size, $timeline-inner-dot-regular-size)
+  @each $name, $multiplier in settings.$size-scales
+    $size: $timeline-dot-size + (8 * $multiplier)
 
-  &--small
-    +timeline-dots($timeline-dot-small-size, $timeline-inner-dot-small-size)
+    &--size-#{$name}
+      height: $size
+      width: $size
 
-  &--large
-    +timeline-dots($timeline-dot-large-size, $timeline-inner-dot-large-size)
+      .v-timeline-divider__inner-dot
+        height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
+        width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
 
-.v-timeline-item__inner-dot
-  border-radius: 50%
+.v-timeline-divider__inner-dot
+  align-items: center
+  border-radius: $timeline-dot-border-radius
   display: flex
   justify-content: center
-  align-items: center
 
-.v-timeline-item__opposite
-  flex: 1 1 auto
-  align-self: center
-  max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+/** Modifiers **/
 
-// Before/after directions
-.v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
-  .v-timeline-item
-    &:nth-child(odd):not(.v-timeline-item--before), &--after
-      +timeline-item-align(left)
-      +timeline-wedge-align(left)
-      .v-timeline-item__body
-        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
+// Density
+.v-timeline--density-comfortable
+  @include horizontal(true)
+    height: 100%
 
-    &:nth-child(even):not(.v-timeline-item--after), &--before
-      +timeline-item-align(right)
-      +timeline-wedge-align(right)
-      .v-timeline-item__body
-        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+    &.v-timeline--side-end
+      grid-template-rows: $timeline-density-comfortable-grid-template-end
+
+    &.v-timeline--side-start
+      grid-template-rows: $timeline-density-comfortable-grid-template-start
+
+  @include vertical(true)
+    width: 100%
 
-// Wedge
-.v-timeline-item__body
-  > .v-card:not(.v-card--flat)
-    &:before, &:after
-      content: ''
-      position: absolute
-      border-top: $timeline-wedge-size solid transparent
-      border-bottom: $timeline-wedge-size solid transparent
-      border-right: $timeline-wedge-size solid black
-      top: calc(50% - #{$timeline-wedge-size})
+    &.v-timeline--side-end
+      grid-template-columns: $timeline-density-comfortable-grid-template-end
 
-    &:after
-      border-right-color: inherit
+    &.v-timeline--side-start
+      grid-template-columns: $timeline-density-comfortable-grid-template-start
 
-    &:before
-      top: calc(50% - #{$timeline-wedge-size} + 2px)
+.v-timeline--density-compact
+  @include horizontal(true)
+    &.v-timeline--side-end
+      grid-template-rows: $timeline-density-compact-grid-template-end
 
-// Modifiers
-.v-timeline--align-top
-  .v-timeline-item__dot
-    align-self: start
+    &.v-timeline--side-start
+      grid-template-rows: $timeline-density-compact-grid-template-start
 
-  .v-timeline-item__body
-    > .v-card
-      &:before
-        top: calc(0% + #{$timeline-wedge-size} + 2px)
+    .v-timeline-item__body
+      grid-row: 1
 
-      &:after
-        top: calc(0% + #{$timeline-wedge-size})
+  @include vertical(true)
+    &.v-timeline--side-end
+      grid-template-columns: $timeline-density-compact-grid-template-end
 
-.v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
-  +timeline-line-align($timeline-divider-center, left, right)
+    &.v-timeline--side-start
+      grid-template-columns: $timeline-density-compact-grid-template-start
+
+    .v-timeline-item__body
+      grid-column: 3
+
+// Side
+.v-timeline.v-timeline--side-end
+  .v-timeline-item
+    @include horizontal(true)
+      .v-timeline-item__body
+        grid-row: 3
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
 
-.v-timeline--reverse:not(.v-timeline--dense)
-  +timeline-line-align($timeline-divider-center, right, left)
+      .v-timeline-item__opposite
+        grid-row: 1
+        padding-block-end: $timeline-item-padding
+        padding-block-start: initial
 
+    @include vertical(true)
+      .v-timeline-item__body
+        grid-column: 3
+        text-align: initial
+        padding-inline-start: $timeline-item-padding
+        padding-inline-end: initial
+
+      .v-timeline-item__opposite
+        grid-column: 1
+        text-align: end
+        padding-inline-end: $timeline-item-padding
+        padding-inline-start: initial
+
+.v-timeline.v-timeline--side-start
   .v-timeline-item
-    &:nth-child(odd):not(.v-timeline-item--after), &--before
-      +timeline-item-align(right)
-      +timeline-wedge-align(right)
+    @include horizontal(true)
       .v-timeline-item__body
-        max-width: calc(#{100% - $timeline-divider-center} - #{$timeline-divider-width / 2})
+        grid-row: 1
+        padding-block-end: $timeline-item-padding
+        padding-block-start: initial
 
-    &:nth-child(even):not(.v-timeline-item--before), &--after
-      +timeline-item-align(left)
-      +timeline-wedge-align(left)
+      .v-timeline-item__opposite
+        grid-row: 3
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
+
+    @include vertical(true)
       .v-timeline-item__body
-        max-width: calc(#{$timeline-divider-center} - #{$timeline-divider-width / 2})
+        grid-column: 1
+        text-align: end
+        padding-inline-end: $timeline-item-padding
+
+      .v-timeline-item__opposite
+        grid-column: 3
+        text-align: initial
+        padding-inline-start: $timeline-item-padding
+
+// Fill dot
+.v-timeline-divider--fill-dot
+  .v-timeline-divider__inner-dot
+    height: inherit
+    width: inherit
 
-.v-timeline--reverse.v-timeline--dense
-  +timeline-line-align($timeline-divider-width / 2, right, left)
+// Truncate line
+.v-timeline--truncate-line-end
+  .v-timeline-item:last-child
+    .v-timeline-divider__line
+      @include horizontal(true)
+        width: 50%
 
-.v-timeline--dense:not(.v-timeline--reverse)
-  +timeline-line-align($timeline-divider-width / 2, left, right)
+      @include vertical(true)
+        height: $timeline-item-padding
 
-.v-timeline--dense
-  .v-timeline-item
-    flex-direction: row-reverse !important
-    +timeline-wedge-align(left)
+.v-timeline--truncate-line-end.v-timeline--align-start
+  .v-timeline-item:last-child
+    .v-timeline-divider__line
+      @include horizontal(true)
+        width: $timeline-item-padding
 
-  .v-timeline-item__body
-    max-width: calc(100% - #{$timeline-divider-width})
+.v-timeline--truncate-line-start
+  .v-timeline-item:first-child
+    @include horizontal(true)
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-inline-start: 0
 
-  .v-timeline-item__opposite
-    display: none
+    @include vertical(true)
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-block-start: 0
 
-.v-timeline--reverse.v-timeline--dense
-  .v-timeline-item
-    flex-direction: row !important
-    +timeline-wedge-align(right)
+.v-timeline--truncate-line-start.v-timeline--align-center
+  .v-timeline-item:first-child
+    .v-timeline-divider__line
+      $inset: calc(50% + #{$timeline-item-padding} - var(--v-timeline-dot-size))
+
+      @include horizontal(true)
+        width: calc(50% + var(--v-timeline-dot-size))
+
+        @include tools.ltr
+          left: $inset
+        @include tools.rtl
+          right: $inset
+
+      @include vertical(true)
+        height: calc(50% + var(--v-timeline-dot-size))
+
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset
+
+// Alignment
+.v-timeline--align-center
+  @include horizontal(true)
+    justify-items: center
+
+    .v-timeline-divider
+      justify-content: center
+
+  @include vertical(true)
+    align-items: center
+
+    .v-timeline-divider
+      justify-content: center
+
+.v-timeline--align-start
+  @include horizontal
+    justify-content: flex-start
+
+  @include vertical(true)
+    align-items: flex-start
+
+    .v-timeline-divider
+      justify-content: flex-start
+
+// Inset line
+.v-timeline--inset-line
+  .v-timeline-divider__line
+    $inset: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2)
+
+    @include horizontal(true)
+      width: calc(100% + #{$timeline-item-padding} - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+
+      @include tools.ltr
+        left: $inset
+      @include tools.rtl
+        right: $inset
+
+    @include vertical(true)
+      height: calc(100% + #{$timeline-item-padding} - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+
+      @include tools.ltr
+        top: $inset
+      @include tools.rtl
+        bottom: $inset
+
+  .v-timeline-item:first-child
+    $inset: calc(50% + var(--v-timeline-dot-size) / 2 + #{$timeline-item-padding} / 2 + var(--v-timeline-line-inset))
+
+    .v-timeline-divider__line
+      @include horizontal(true)
+        width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          left: $inset
+        @include tools.rtl
+          right: $inset
+
+      @include vertical(true)
+        height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2)
 
-.v-timeline-item--fill-dot
-  .v-timeline-item__inner-dot
-    height: inherit
-    margin: 0
-    width: inherit
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset
+
+  .v-timeline-item:last-child
+    $inset: calc(50% + var(--v-timeline-line-inset) - #{$timeline-item-padding} / 2 + var(--v-timeline-dot-size) / 2)
+
+    .v-timeline-divider__line
+      @include horizontal(true)
+        width: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          left: $inset
+        @include tools.rtl
+          right: $inset
+
+      @include vertical(true)
+        height: calc(50% - #{$timeline-item-padding} - var(--v-timeline-line-inset) * 2)
+
+        @include tools.ltr
+          top: $inset
+        @include tools.rtl
+          bottom: $inset

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -0,0 +1,76 @@
+import { createVNode as _createVNode } from "vue";
+// Components
+import { VIcon } from "../VIcon/index.mjs";
+import { VTimelineSymbol } from "./shared.mjs"; // Composables
+
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeSizeProps, useSize } from "../../composables/size.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs"; // Utilities
+
+import { inject, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs";
+export const VTimelineDivider = defineComponent({
+  name: 'VTimelineDivider',
+  props: {
+    hideDot: Boolean,
+    lineColor: String,
+    icon: String,
+    iconColor: String,
+    fillDot: Boolean,
+    dotColor: String,
+    ...makeRoundedProps(),
+    ...makeSizeProps(),
+    ...makeElevationProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const timeline = inject(VTimelineSymbol);
+    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider');
+    const {
+      sizeClasses,
+      sizeStyles
+    } = useSize(props, 'v-timeline-divider__dot');
+    const {
+      backgroundColorStyles,
+      backgroundColorClasses
+    } = useBackgroundColor(toRef(props, 'dotColor'));
+    const {
+      backgroundColorStyles: lineColorStyles,
+      backgroundColorClasses: lineColorClasses
+    } = useBackgroundColor(timeline.lineColor);
+    const {
+      roundedClasses
+    } = useRounded(props, 'v-timeline-divider__dot');
+    const {
+      elevationClasses
+    } = useElevation(props);
+    return () => _createVNode("div", {
+      "class": ['v-timeline-divider', {
+        'v-timeline-divider--fill-dot': props.fillDot
+      }]
+    }, [!props.hideDot && _createVNode("div", {
+      "class": ['v-timeline-divider__dot', roundedClasses.value, sizeClasses.value, elevationClasses.value],
+      "style": sizeStyles.value
+    }, [_createVNode("div", {
+      "class": ['v-timeline-divider__inner-dot', roundedClasses.value, backgroundColorClasses.value],
+      "style": backgroundColorStyles.value
+    }, [slots.default ? slots.default({
+      icon: props.icon,
+      iconColor: props.iconColor,
+      size: props.size
+    }) : props.icon ? _createVNode(VIcon, {
+      "icon": props.icon,
+      "color": props.iconColor,
+      "size": props.size
+    }, null) : undefined])]), _createVNode("div", {
+      "class": ['v-timeline-divider__line', lineColorClasses.value],
+      "style": lineColorStyles.value
+    }, null)]);
+  }
+
+});
+//# sourceMappingURL=VTimelineDivider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"names":["VIcon","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","inject","toRef","defineComponent","VTimelineDivider","name","props","hideDot","Boolean","lineColor","String","icon","iconColor","fillDot","dotColor","setup","slots","timeline","Error","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","lineColorStyles","lineColorClasses","roundedClasses","elevationClasses","value","default","size","undefined"],"mappings":";AAAA;SACSA,K;SACAC,e,wBAET;;SACSC,kB;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,gB,EAAkBC,U,yCAE3B;;AACA,SAASC,MAAT,EAAiBC,KAAjB,QAA8B,KAA9B;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGD,eAAe,CAAC;AAC9CE,EAAAA,IAAI,EAAE,kBADwC;AAG9CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEC,OADJ;AAELC,IAAAA,SAAS,EAAEC,MAFN;AAGLC,IAAAA,IAAI,EAAED,MAHD;AAILE,IAAAA,SAAS,EAAEF,MAJN;AAKLG,IAAAA,OAAO,EAAEL,OALJ;AAMLM,IAAAA,QAAQ,EAAEJ,MANL;AAQL,OAAGX,gBAAgB,EARd;AASL,OAAGF,aAAa,EATX;AAUL,OAAGF,kBAAkB;AAVhB,GAHuC;;AAgB9CoB,EAAAA,KAAK,CAAET,KAAF,QAAoB;AAAA,QAAX;AAAEU,MAAAA;AAAF,KAAW;AACvB,UAAMC,QAAQ,GAAGhB,MAAM,CAACR,eAAD,CAAvB;AAEA,QAAI,CAACwB,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;AAEf,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA8BtB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;AACA,UAAM;AAAEe,MAAAA,qBAAF;AAAyBC,MAAAA;AAAzB,QAAoD5B,kBAAkB,CAACQ,KAAK,CAACI,KAAD,EAAQ,UAAR,CAAN,CAA5E;AACA,UAAM;AAAEe,MAAAA,qBAAqB,EAAEE,eAAzB;AAA0CD,MAAAA,sBAAsB,EAAEE;AAAlE,QAAuF9B,kBAAkB,CAACuB,QAAQ,CAACR,SAAV,CAA/G;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAqBzB,UAAU,CAACM,KAAD,EAAQ,yBAAR,CAArC;AACA,UAAM;AAAEoB,MAAAA;AAAF,QAAuB9B,YAAY,CAACU,KAAD,CAAzC;AAEA,WAAO;AAAA,eAEI,CACL,oBADK,EAEL;AACE,wCAAgCA,KAAK,CAACO;AADxC,OAFK;AAFJ,QASD,CAACP,KAAK,CAACC,OAAP;AAAA,eAES,CACL,yBADK,EAELkB,cAAc,CAACE,KAFV,EAGLR,WAAW,CAACQ,KAHP,EAILD,gBAAgB,CAACC,KAJZ,CAFT;AAAA,eASUP,UAAU,CAACO;AATrB;AAAA,eAYW,CACL,+BADK,EAELF,cAAc,CAACE,KAFV,EAGLL,sBAAsB,CAACK,KAHlB,CAZX;AAAA,eAiBYN,qBAAqB,CAACM;AAjBlC,QAoBMX,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAc;AAAEjB,MAAAA,IAAI,EAAEL,KAAK,CAACK,IAAd;AAAoBC,MAAAA,SAAS,EAAEN,KAAK,CAACM,SAArC;AAAgDiB,MAAAA,IAAI,EAAEvB,KAAK,CAACuB;AAA5D,KAAd,CAAhB,GACEvB,KAAK,CAACK,IAAN;AAAA,cAA2BL,KAAK,CAACK,IAAjC;AAAA,eAAgDL,KAAK,CAACM,SAAtD;AAAA,cAAyEN,KAAK,CAACuB;AAA/E,eACAC,SAtBR,IATC;AAAA,eAqCM,CACL,0BADK,EAELN,gBAAgB,CAACG,KAFZ,CArCN;AAAA,eAyCOJ,eAAe,CAACI;AAzCvB,cAAP;AA6CD;;AAxE6C,CAAD,CAAxC","sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VTimelineSymbol } from './shared'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { inject, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    hideDot: Boolean,\n    lineColor: String,\n    icon: String,\n    iconColor: String,\n    fillDot: Boolean,\n    dotColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const timeline = inject(VTimelineSymbol)\n\n    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider')\n\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { backgroundColorStyles: lineColorStyles, backgroundColorClasses: lineColorClasses } = useBackgroundColor(timeline.lineColor)\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        { !props.hideDot && (\n          <div\n            class={[\n              'v-timeline-divider__dot',\n              roundedClasses.value,\n              sizeClasses.value,\n              elevationClasses.value,\n            ]}\n            // @ts-expect-error: null\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                roundedClasses.value,\n                backgroundColorClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              {\n                slots.default ? slots.default({ icon: props.icon, iconColor: props.iconColor, size: props.size })\n                : props.icon ? <VIcon icon={ props.icon } color={ props.iconColor } size={ props.size } />\n                : undefined\n              }\n            </div>\n          </div>\n        ) }\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    )\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"file":"VTimelineDivider.mjs"}