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

package/lib/components/VTimeline/VTimeline.sass

@@ -1,58 +1,67 @@
-@forward './variables'
 @use 'sass:map'
+@use 'sass:math'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
 @use './mixins' as *
 
-// Theme
+// VTimeline
 .v-timeline
   .v-timeline-divider__dot
     background: $timeline-dot-divider-background
 
-// Elements
+  .v-timeline-divider__inner-dot
+    background: $timeline-inner-dot-divider-background
+
 .v-timeline
   display: grid
   grid-auto-flow: dense
   position: relative
 
   @include horizontal(true)
-    grid-template-rows: $timeline-item-grid-template
+    grid-column-gap: $timeline-item-padding
     width: 100%
 
-    .v-timeline-item__body, .v-timeline-item__opposite
-      padding-inline-start: calc((var(--v-timeline-dot-size) / 2) - 5px)
+    @include timeline-first-item()
+      padding-inline-start: $timeline-item-padding
+
+    @include timeline-last-item()
+      padding-inline-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
         grid-row: 3
-        padding-top: $timeline-item-padding
+        padding-block-start: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-row: 1
-        padding-bottom: $timeline-item-padding
+        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-bottom: $timeline-item-padding
+        padding-block-end: $timeline-item-padding
+        align-self: flex-end
 
       .v-timeline-item__opposite
         grid-row: 3
-        padding-top: $timeline-item-padding
+        padding-block-start: $timeline-item-padding
 
   @include vertical(true)
-    grid-template-columns: $timeline-item-grid-template
+    grid-row-gap: $timeline-item-padding
     height: 100%
 
-    .v-timeline-item__body, .v-timeline-item__opposite
-      // TODO: replace with css var?
-      padding-top: calc((var(--v-timeline-dot-size) - 1.5em) / 2)
+    @include timeline-first-item()
+      padding-block-start: $timeline-item-padding
+
+    @include timeline-last-item()
+      padding-block-end: $timeline-item-padding
 
     .v-timeline-item:nth-child(2n)
       .v-timeline-item__body
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
       .v-timeline-item__opposite
@@ -66,57 +75,130 @@
 
       .v-timeline-item__opposite
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
+// VTimelineItem
 .v-timeline-item
   display: contents
 
-.v-timeline-divider__line
+// VTimelineDivider
+.v-timeline-divider
+  position: relative
+  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
+
+$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+$timeline-line-start: math.div(-$timeline-item-padding, 2)
+$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
+
+.v-timeline-divider__before
   background: $timeline-divider-line-background
   position: absolute
 
   @include horizontal
     height: $timeline-divider-line-thickness
-    width: calc(100% - var(--v-timeline-line-inset, 0px))
+    width: $timeline-line-size
+
+    @include tools.ltr
+      left: $timeline-line-start
+      right: initial
+
+    @include tools.rtl
+      right: $timeline-line-start
+      left: initial
 
   @include vertical
-    height: 100%
+    height: $timeline-line-size
     width: $timeline-divider-line-thickness
+    top: $timeline-line-start
 
-.v-timeline--inset-line
-  .v-timeline-divider__line
-    @include vertical(true)
-      height: calc(100% - var(--v-timeline-dot-size) - #{$timeline-inset-divider-line})
-      bottom: calc(#{$timeline-inset-divider-line} / 2)
+.v-timeline-divider__after
+  background: $timeline-divider-line-background
+  position: absolute
 
-    @include horizontal(true)
-      width: calc(100% - var(--v-timeline-dot-size) - #{$timeline-inset-divider-line})
-      inset-inline-end: calc(#{$timeline-inset-divider-line} / 2)
+  @include horizontal
+    height: $timeline-divider-line-thickness
+    width: $timeline-line-size
 
-.v-timeline:not(.v-timeline--inset-line)
-  .v-timeline-item:first-child
-    .v-timeline-divider__line
-      @include vertical(true)
-        bottom: 0
-        height: calc(100% - (var(--v-timeline-dot-size) / 2))
+    @include tools.ltr
+      right: $timeline-line-start
+      left: initial
 
-      @include horizontal(true)
-        width: calc(100% - (var(--v-timeline-dot-size) / 2))
-        inset-inline-end: 0
+    @include tools.rtl
+      left: $timeline-line-start
+      right: initial
 
-.v-timeline-divider
-  position: relative
-  display: flex
-  align-items: center
+  @include vertical
+    height: $timeline-line-size
+    width: $timeline-divider-line-thickness
+    bottom: $timeline-line-start
 
-  @include horizontal
-    flex-direction: row
-    grid-row: 2
+.v-timeline-item:first-child
+  .v-timeline-divider__before
+    @include vertical
+      height: $timeline-line-size
+      top: 0
 
-  @include vertical
-    flex-direction: column
-    grid-column: 2
+    @include horizontal
+      width: $timeline-line-size
+
+      @include tools.ltr
+        left: 0
+        right: initial
+
+      @include tools.rtl
+        right: 0
+        left: initial
+
+  .v-timeline-divider__after
+    @include vertical
+      height: $timeline-line-size-first-last
+
+    @include horizontal
+      width: $timeline-line-size-first-last
+
+      @include tools.ltr
+        right: $timeline-line-start
+        left: initial
+
+      @include tools.rtl
+        left: $timeline-line-start
+        right: initial
+
+.v-timeline-item:last-child
+  .v-timeline-divider__before
+    @include vertical
+      height: $timeline-line-size-first-last
+
+    @include horizontal
+      width: $timeline-line-size-first-last
+
+  .v-timeline-divider__after
+    @include vertical
+      height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+      bottom: 0
+
+    @include horizontal
+      width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
+
+      @include tools.ltr
+        right: 0
+        left: initial
+
+      @include tools.rtl
+        left: 0
+        right: initial
 
 .v-timeline-divider__dot
   z-index: 1
@@ -147,6 +229,21 @@
 
 /** Modifiers **/
 
+// Justify
+.v-timeline--justify-center
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-center
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-center
+
+.v-timeline--justify-auto
+  @include horizontal(true)
+    grid-template-rows: $timeline-item-grid-template-auto
+
+  @include vertical(true)
+    grid-template-columns: $timeline-item-grid-template-auto
+
 // Density
 .v-timeline--density-comfortable
   @include horizontal(true)
@@ -194,46 +291,50 @@
     @include horizontal(true)
       .v-timeline-item__body
         grid-row: 3
-        padding-bottom: initial
-        padding-top: $timeline-item-padding
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-row: 1
-        padding-bottom: $timeline-item-padding
-        padding-top: initial
+        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
+        justify-self: flex-start
 
       .v-timeline-item__opposite
         grid-column: 1
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
+        padding-inline-start: initial
 
 .v-timeline.v-timeline--side-start
   .v-timeline-item
     @include horizontal(true)
       .v-timeline-item__body
         grid-row: 1
-        padding-bottom: $timeline-item-padding
-        padding-top: initial
+        padding-block-end: $timeline-item-padding
+        padding-block-start: initial
 
       .v-timeline-item__opposite
         grid-row: 3
-        padding-bottom: initial
-        padding-top: $timeline-item-padding
+        padding-block-end: initial
+        padding-block-start: $timeline-item-padding
 
     @include vertical(true)
       .v-timeline-item__body
         grid-column: 1
-        text-align: end
+        justify-self: flex-end
         padding-inline-end: $timeline-item-padding
 
       .v-timeline-item__opposite
         grid-column: 3
         padding-inline-start: $timeline-item-padding
+        justify-self: flex-start
 
 // Fill dot
 .v-timeline-divider--fill-dot
@@ -241,7 +342,100 @@
     height: inherit
     width: inherit
 
+// Truncate line
+.v-timeline--truncate-line-start
+  .v-timeline-item:first-child
+    .v-timeline-divider__before
+      display: none
+
 .v-timeline--truncate-line-end
   .v-timeline-item:last-child
-    .v-timeline-divider__line
+    .v-timeline-divider__after
       display: none
+
+// Alignment
+.v-timeline--align-center
+  --v-timeline-line-size-base: 50%
+  --v-timeline-line-size-offset: 0px
+
+  @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
+  --v-timeline-line-size-base: 100%
+  --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  $timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
+  $timeline-line-size-after: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset))
+
+  .v-timeline-item:first-child
+    .v-timeline-divider__before
+      --v-timeline-line-size-offset: #{$timeline-item-padding}
+
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
+
+  .v-timeline-item:last-child
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: 0px
+
+  @include horizontal(true)
+    justify-items: flex-start
+
+    .v-timeline-divider
+      justify-content: flex-start
+
+      .v-timeline-divider__before
+        width: $timeline-line-size-before
+
+      .v-timeline-divider__after
+        width: $timeline-line-size-after
+
+  @include vertical(true)
+    align-items: flex-start
+
+    .v-timeline-divider
+      justify-content: flex-start
+
+      .v-timeline-divider__before
+        height: $timeline-line-size-before
+
+      .v-timeline-divider__after
+        height: $timeline-line-size-after
+
+// Truncate start
+.v-timeline--truncate-line-start
+  .v-timeline-item:first-child
+    .v-timeline-divider__after
+      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  @include vertical(true)
+    @include timeline-first-item()
+      padding-block-start: 0
+
+  @include horizontal(true)
+    @include timeline-first-item()
+      padding-inline-start: 0
+
+// Truncate end
+.v-timeline--truncate-line-end
+  .v-timeline-item:last-child
+    .v-timeline-divider__before
+      --v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
+
+  @include vertical(true)
+    @include timeline-last-item()
+      padding-block-end: 0
+
+  @include horizontal(true)
+    @include timeline-last-item()
+      padding-inline-end: 0

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -1,23 +1,25 @@
 import { createVNode as _createVNode } from "vue";
 // Components
-import { VIcon } from "../VIcon/index.mjs";
-import { VTimelineSymbol } from "./shared.mjs"; // Composables
+import { VIcon } from "../VIcon/index.mjs"; // Composables
 
-import { useBackgroundColor } from "../../composables/color.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
-import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs"; // Utilities
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import { defineComponent, inject, toRef } from 'vue';
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue';
 export const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
   props: {
+    dotColor: String,
+    fillDot: Boolean,
     hideDot: Boolean,
-    lineColor: String,
-    icon: String,
+    icon: IconValue,
     iconColor: String,
-    fillDot: Boolean,
-    dotColor: String,
+    lineColor: String,
     ...makeRoundedProps(),
     ...makeSizeProps(),
     ...makeElevationProps()
@@ -27,8 +29,6 @@ export const VTimelineDivider = defineComponent({
     let {
       slots
     } = _ref;
-    const timeline = inject(VTimelineSymbol);
-    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider');
     const {
       sizeClasses,
       sizeStyles
@@ -37,38 +37,46 @@ export const VTimelineDivider = defineComponent({
       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)]);
+    const {
+      backgroundColorClasses: lineColorClasses,
+      backgroundColorStyles: lineColorStyles
+    } = useBackgroundColor(toRef(props, 'lineColor'));
+    provideDefaults({
+      VIcon: {
+        color: toRef(props, 'iconColor'),
+        icon: toRef(props, 'icon'),
+        size: toRef(props, 'size')
+      }
+    });
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "class": ['v-timeline-divider', {
+          'v-timeline-divider--fill-dot': props.fillDot
+        }]
+      }, [_createVNode("div", {
+        "class": ['v-timeline-divider__before', lineColorClasses.value],
+        "style": lineColorStyles.value
+      }, null), !props.hideDot && _createVNode("div", {
+        "key": "dot",
+        "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
+        "style": sizeStyles.value
+      }, [_createVNode("div", {
+        "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
+        "style": backgroundColorStyles.value
+      }, [((_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)) ?? (props.icon ? _createVNode(VIcon, null, null) : undefined)])]), _createVNode("div", {
+        "class": ['v-timeline-divider__after', lineColorClasses.value],
+        "style": lineColorStyles.value
+      }, null)]);
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"names":["VIcon","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","defineComponent","inject","toRef","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,eAAT,EAA0BC,MAA1B,EAAkCC,KAAlC,QAA+C,KAA/C;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;AAC9CI,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,GAAGf,MAAM,CAACT,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,CAACS,KAAK,CAACG,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 { defineComponent, inject, toRef } from 'vue'\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"}
+{"version":3,"file":"VTimelineDivider.mjs","names":["VIcon","IconValue","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","provideDefaults","useBackgroundColor","defineComponent","useRender","toRef","VTimelineDivider","name","props","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","setup","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","color","size","value","default","undefined"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    icon: IconValue,\n    iconColor: String,\n    lineColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(toRef(props, 'lineColor'))\n\n    provideDefaults({\n      VIcon: {\n        color: toRef(props, 'iconColor'),\n        icon: toRef(props, 'icon'),\n        size: toRef(props, 'size'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        <div\n          class={[\n            'v-timeline-divider__before',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { slots.default?.() ?? (props.icon ? (<VIcon />) : undefined) }\n            </div>\n          </div>\n        ) }\n\n        <div\n          class={[\n            'v-timeline-divider__after',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":";AAAA;SACSA,K,8BAET;;SACSC,S;SACAC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,e;SACAC,kB,uCAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,IAAI,EAAEpB,SAJD;IAKLqB,SAAS,EAAEL,MALN;IAMLM,SAAS,EAAEN,MANN;IAQL,GAAGb,gBAAgB,EARd;IASL,GAAGE,aAAa,EATX;IAUL,GAAGJ,kBAAkB;EAVhB,CAHuC;;EAgB9CsB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BpB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEa,qBAAF;MAAyBC;IAAzB,IAAoDpB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe;IAAF,IAAqBzB,UAAU,CAACU,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEgB;IAAF,IAAuB5B,YAAY,CAACY,KAAD,CAAzC;IACA,MAAM;MACJc,sBAAsB,EAAEG,gBADpB;MAEJJ,qBAAqB,EAAEK;IAFnB,IAGFxB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,WAAR,CAAN,CAHtB;IAKAP,eAAe,CAAC;MACdR,KAAK,EAAE;QACLkC,KAAK,EAAEtB,KAAK,CAACG,KAAD,EAAQ,WAAR,CADP;QAELM,IAAI,EAAET,KAAK,CAACG,KAAD,EAAQ,MAAR,CAFN;QAGLoB,IAAI,EAAEvB,KAAK,CAACG,KAAD,EAAQ,MAAR;MAHN;IADO,CAAD,CAAf;IAQAJ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,oBADK,EAEL;UACE,gCAAgCI,KAAK,CAACG;QADxC,CAFK;MAFD;QAAA,SAUG,CACL,4BADK,EAELc,gBAAgB,CAACI,KAFZ,CAVH;QAAA,SAcIH,eAAe,CAACG;MAdpB,UAiBJ,CAACrB,KAAK,CAACK,OAAP;QAAA,OAEM,KAFN;QAAA,SAGS,CACL,yBADK,EAELW,gBAAgB,CAACK,KAFZ,EAGLN,cAAc,CAACM,KAHV,EAILV,WAAW,CAACU,KAJP,CAHT;QAAA,SASUT,UAAU,CAACS;MATrB;QAAA,SAYW,CACL,+BADK,EAELP,sBAAsB,CAACO,KAFlB,EAGLN,cAAc,CAACM,KAHV,CAZX;QAAA,SAiBYR,qBAAqB,CAACQ;MAjBlC,IAmBM,mBAAAX,KAAK,CAACY,OAAN,yCAAAZ,KAAK,OAAiBV,KAAK,CAACM,IAAN,qCAA2BiB,SAA5C,CAnBX,IAjBI;QAAA,SA0CG,CACL,2BADK,EAELN,gBAAgB,CAACI,KAFZ,CA1CH;QAAA,SA8CIH,eAAe,CAACG;MA9CpB;IAAA,CAAD,CAAT;IAmDA,OAAO,EAAP;EACD;;AAtF6C,CAAD,CAAxC"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -1,19 +1,20 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Components
-import { VTimelineSymbol } from "./shared.mjs";
 import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
 
-import { makeTagProps } from "../../composables/tag.mjs";
-import { makeSizeProps } from "../../composables/size.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps } from "../../composables/elevation.mjs";
-import { makeRoundedProps } from "../../composables/rounded.mjs"; // Utilities
+import { makeRoundedProps } from "../../composables/rounded.mjs";
+import { makeSizeProps } from "../../composables/size.mjs";
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { inject, ref, watch } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { ref, watch } from 'vue';
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 export const VTimelineItem = defineComponent({
   name: 'VTimelineItem',
   props: {
+    density: String,
     dotColor: String,
     fillDot: Boolean,
     hideDot: Boolean,
@@ -21,8 +22,9 @@ export const VTimelineItem = defineComponent({
       type: Boolean,
       default: undefined
     },
-    icon: String,
+    icon: IconValue,
     iconColor: String,
+    lineInset: [Number, String],
     ...makeRoundedProps(),
     ...makeElevationProps(),
     ...makeSizeProps(),
@@ -34,22 +36,20 @@ export const VTimelineItem = defineComponent({
     let {
       slots
     } = _ref;
-    const timeline = inject(VTimelineSymbol);
-    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider');
     const {
       dimensionStyles
     } = useDimension(props);
     const dotSize = ref(0);
     const dotRef = ref();
     watch(dotRef, newValue => {
-      var _newValue$$el$querySe, _newValue$$el$querySe2;
+      var _newValue$$el$querySe;
 
       if (!newValue) return;
-      dotSize.value = (_newValue$$el$querySe = (_newValue$$el$querySe2 = newValue.$el.querySelector('.v-timeline-divider__dot')) == null ? void 0 : _newValue$$el$querySe2.getBoundingClientRect().width) != null ? _newValue$$el$querySe : 0;
+      dotSize.value = ((_newValue$$el$querySe = newValue.$el.querySelector('.v-timeline-divider__dot')) == null ? void 0 : _newValue$$el$querySe.getBoundingClientRect().width) ?? 0;
     }, {
       flush: 'post'
     });
-    return () => {
+    useRender(() => {
       var _slots$default, _slots$opposite;
 
       return _createVNode("div", {
@@ -57,7 +57,8 @@ export const VTimelineItem = defineComponent({
           'v-timeline-item--fill-dot': props.fillDot
         }],
         "style": {
-          '--v-timeline-dot-size': convertToUnit(dotSize.value)
+          '--v-timeline-dot-size': convertToUnit(dotSize.value),
+          '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0)
         }
       }, [_createVNode("div", {
         "class": "v-timeline-item__body",
@@ -74,10 +75,11 @@ export const VTimelineItem = defineComponent({
         "rounded": props.rounded
       }, {
         default: slots.icon
-      }), timeline.density.value !== 'compact' && _createVNode("div", {
+      }), props.density !== 'compact' && _createVNode("div", {
         "class": "v-timeline-item__opposite"
       }, [!props.hideOpposite && ((_slots$opposite = slots.opposite) == null ? void 0 : _slots$opposite.call(slots))])]);
-    };
+    });
+    return {};
   }
 
 });