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

package/lib/components/VTimeline/VTimeline.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use 'sass:map'
 @use '../../styles/settings'
 @use '../../styles/tools'
@@ -10,6 +9,9 @@
   .v-timeline-divider__dot
     background: $timeline-dot-divider-background
 
+  .v-timeline-divider__inner-dot
+    background: $timeline-inner-dot-divider-background
+
 // Elements
 .v-timeline
   display: grid
@@ -18,36 +20,48 @@
 
   @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)
+    .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-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
 
       .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)
+    .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: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
@@ -72,39 +86,6 @@
 .v-timeline-item
   display: contents
 
-.v-timeline-divider__line
-  background: $timeline-divider-line-background
-  position: absolute
-
-  @include horizontal
-    height: $timeline-divider-line-thickness
-    width: calc(100% - var(--v-timeline-line-inset, 0px))
-
-  @include vertical
-    height: 100%
-    width: $timeline-divider-line-thickness
-
-.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)
-
-    @include horizontal(true)
-      width: calc(100% - var(--v-timeline-dot-size) - #{$timeline-inset-divider-line})
-      inset-inline-end: calc(#{$timeline-inset-divider-line} / 2)
-
-.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 horizontal(true)
-        width: calc(100% - (var(--v-timeline-dot-size) / 2))
-        inset-inline-end: 0
-
 .v-timeline-divider
   position: relative
   display: flex
@@ -113,11 +94,43 @@
   @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
@@ -194,36 +207,39 @@
     @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
 
       .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
     @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
@@ -233,6 +249,7 @@
 
       .v-timeline-item__opposite
         grid-column: 3
+        text-align: initial
         padding-inline-start: $timeline-item-padding
 
 // Fill dot
@@ -241,7 +258,134 @@
     height: inherit
     width: inherit
 
+// Truncate line
 .v-timeline--truncate-line-end
   .v-timeline-item:last-child
     .v-timeline-divider__line
-      display: none
+      @include horizontal(true)
+        width: 50%
+
+      @include vertical(true)
+        height: $timeline-item-padding
+
+.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--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
+
+    @include vertical(true)
+      .v-timeline-item__body, .v-timeline-item__opposite, .v-timeline-divider
+        padding-block-start: 0
+
+.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)
+
+        @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

@@ -6,15 +6,17 @@ 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 { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
 
-import { defineComponent, inject, toRef } from 'vue';
+import { inject, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs";
 export const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
   props: {
     hideDot: Boolean,
     lineColor: String,
-    icon: String,
+    icon: IconValue,
     iconColor: String,
     fillDot: Boolean,
     dotColor: String,

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","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","IconValue","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"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"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'\nimport { IconValue } from '@/composables/icons'\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: IconValue,\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"],"mappings":";AAAA;SACSA,K;SACAC,e,wBAET;;SACSC,kB;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,gB,EAAkBC,U;SAClBC,S,uCAET;;AACA,SAASC,MAAT,EAAiBC,KAAjB,QAA8B,KAA9B;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGD,eAAe,CAAC;EAC9CE,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,OAAO,EAAEC,OADJ;IAELC,SAAS,EAAEC,MAFN;IAGLC,IAAI,EAAEX,SAHD;IAILY,SAAS,EAAEF,MAJN;IAKLG,OAAO,EAAEL,OALJ;IAMLM,QAAQ,EAAEJ,MANL;IAQL,GAAGZ,gBAAgB,EARd;IASL,GAAGF,aAAa,EATX;IAUL,GAAGF,kBAAkB;EAVhB,CAHuC;;EAgB9CqB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAMC,QAAQ,GAAGhB,MAAM,CAACT,eAAD,CAAvB;IAEA,IAAI,CAACyB,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;IAEf,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BvB,OAAO,CAACS,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEe,qBAAF;MAAyBC;IAAzB,IAAoD7B,kBAAkB,CAACS,KAAK,CAACI,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe,qBAAqB,EAAEE,eAAzB;MAA0CD,sBAAsB,EAAEE;IAAlE,IAAuF/B,kBAAkB,CAACwB,QAAQ,CAACR,SAAV,CAA/G;IACA,MAAM;MAAEgB;IAAF,IAAqB1B,UAAU,CAACO,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEoB;IAAF,IAAuB/B,YAAY,CAACW,KAAD,CAAzC;IAEA,OAAO;MAAA,SAEI,CACL,oBADK,EAEL;QACE,gCAAgCA,KAAK,CAACO;MADxC,CAFK;IAFJ,IASD,CAACP,KAAK,CAACC,OAAP;MAAA,SAES,CACL,yBADK,EAELkB,cAAc,CAACE,KAFV,EAGLR,WAAW,CAACQ,KAHP,EAILD,gBAAgB,CAACC,KAJZ,CAFT;MAAA,SASUP,UAAU,CAACO;IATrB;MAAA,SAYW,CACL,+BADK,EAELF,cAAc,CAACE,KAFV,EAGLL,sBAAsB,CAACK,KAHlB,CAZX;MAAA,SAiBYN,qBAAqB,CAACM;IAjBlC,IAoBMX,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAc;MAAEjB,IAAI,EAAEL,KAAK,CAACK,IAAd;MAAoBC,SAAS,EAAEN,KAAK,CAACM,SAArC;MAAgDiB,IAAI,EAAEvB,KAAK,CAACuB;IAA5D,CAAd,CAAhB,GACEvB,KAAK,CAACK,IAAN;MAAA,QAA2BL,KAAK,CAACK,IAAjC;MAAA,SAAgDL,KAAK,CAACM,SAAtD;MAAA,QAAyEN,KAAK,CAACuB;IAA/E,WACAC,SAtBR,IATC;MAAA,SAqCM,CACL,0BADK,EAELN,gBAAgB,CAACG,KAFZ,CArCN;MAAA,SAyCOJ,eAAe,CAACI;IAzCvB,UAAP;EA6CD;;AAxE6C,CAAD,CAAxC"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -6,7 +6,8 @@ import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
 import { makeElevationProps } from "../../composables/elevation.mjs";
-import { makeRoundedProps } from "../../composables/rounded.mjs"; // Utilities
+import { makeRoundedProps } from "../../composables/rounded.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
 
 import { inject, ref, watch } from 'vue';
 import { convertToUnit, defineComponent } from "../../util/index.mjs";
@@ -21,7 +22,7 @@ export const VTimelineItem = defineComponent({
       type: Boolean,
       default: undefined
     },
-    icon: String,
+    icon: IconValue,
     iconColor: String,
     ...makeRoundedProps(),
     ...makeElevationProps(),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"names":["VTimelineSymbol","VTimelineDivider","makeTagProps","makeSizeProps","makeElevationProps","makeRoundedProps","inject","ref","watch","convertToUnit","defineComponent","makeDimensionProps","useDimension","VTimelineItem","name","props","dotColor","String","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","setup","slots","timeline","Error","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","density","opposite"],"mappings":";AAAA;SACSA,e;SACAC,gB,kCAET;;SACSC,Y;SACAC,a;SACAC,kB;SACAC,gB,yCAET;;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,QAAmC,KAAnC;SACSC,a,EAAeC,e;SACfC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGH,eAAe,CAAC;AAC3CI,EAAAA,IAAI,EAAE,eADqC;AAG3CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,MADL;AAELC,IAAAA,OAAO,EAAEC,OAFJ;AAGLC,IAAAA,OAAO,EAAED,OAHJ;AAILE,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAEH,OADM;AAEZI,MAAAA,OAAO,EAAEC;AAFG,KAJT;AAQLC,IAAAA,IAAI,EAAER,MARD;AASLS,IAAAA,SAAS,EAAET,MATN;AAWL,OAAGZ,gBAAgB,EAXd;AAYL,OAAGD,kBAAkB,EAZhB;AAaL,OAAGD,aAAa,EAbX;AAcL,OAAGD,YAAY,EAdV;AAeL,OAAGS,kBAAkB;AAfhB,GAHoC;;AAqB3CgB,EAAAA,KAAK,CAAEZ,KAAF,QAAoB;AAAA,QAAX;AAAEa,MAAAA;AAAF,KAAW;AACvB,UAAMC,QAAQ,GAAGvB,MAAM,CAACN,eAAD,CAAvB;AAEA,QAAI,CAAC6B,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;AAEf,UAAM;AAAEC,MAAAA;AAAF,QAAsBnB,YAAY,CAACG,KAAD,CAAxC;AAEA,UAAMiB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;AACA,UAAM0B,MAAM,GAAG1B,GAAG,EAAlB;AACAC,IAAAA,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;AAAA;;AACxB,UAAI,CAACA,QAAL,EAAe;AACfF,MAAAA,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;AACD,KAHI,EAGF;AACDC,MAAAA,KAAK,EAAE;AADN,KAHE,CAAL;AAOA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,iBADK,EAEL;AACE,uCAA6BzB,KAAK,CAACG;AADrC,SAFK,CAFJ;AAAA,iBAQI;AACL,mCAAyBT,aAAa,CAACuB,OAAO,CAACG,KAAT;AADjC;AARJ;AAAA,iBAaK,uBAbL;AAAA,iBAcOJ,eAAe,CAACI;AAdvB,4BAgBCP,KAAK,CAACL,OAhBP,qBAgBC,oBAAAK,KAAK,CAhBN;AAAA,eAoBKK,MApBL;AAAA,mBAqBSlB,KAAK,CAACK,OArBf;AAAA,gBAsBML,KAAK,CAACU,IAtBZ;AAAA,qBAuBWV,KAAK,CAACW,SAvBjB;AAAA,gBAwBMX,KAAK,CAAC0B,IAxBZ;AAAA,qBAyBW1B,KAAK,CAAC2B,SAzBjB;AAAA,oBA0BU3B,KAAK,CAACC,QA1BhB;AAAA,mBA2BSD,KAAK,CAACG,OA3Bf;AAAA,mBA4BSH,KAAK,CAAC4B;AA5Bf,SA6BQ;AAAEpB,QAAAA,OAAO,EAAEK,KAAK,CAACH;AAAjB,OA7BR,GAgCDI,QAAQ,CAACe,OAAT,CAAiBT,KAAjB,KAA2B,SAA3B;AAAA,iBACW;AADX,UAEI,CAACpB,KAAK,CAACM,YAAP,wBAAuBO,KAAK,CAACiB,QAA7B,qBAAuB,qBAAAjB,KAAK,CAA5B,CAFJ,EAhCC;AAAA,KAAP;AAuCD;;AA5E0C,CAAD,CAArC","sourcesContent":["// Components\nimport { VTimelineSymbol } from './shared'\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\n\n// Utilities\nimport { inject, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: String,\n    iconColor: String,\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\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 { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { timeline.density.value !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    )\n  },\n})\n"],"file":"VTimelineItem.mjs"}
+{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineSymbol","VTimelineDivider","makeTagProps","makeSizeProps","makeElevationProps","makeRoundedProps","IconValue","inject","ref","watch","convertToUnit","defineComponent","makeDimensionProps","useDimension","VTimelineItem","name","props","dotColor","String","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","setup","slots","timeline","Error","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","density","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineSymbol } from './shared'\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { inject, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: IconValue,\n    iconColor: String,\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\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 { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { timeline.density.value !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    )\n  },\n})\n"],"mappings":";AAAA;SACSA,e;SACAC,gB,kCAET;;SACSC,Y;SACAC,a;SACAC,kB;SACAC,gB;SACAC,S,uCAET;;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,QAAmC,KAAnC;SACSC,a,EAAeC,e;SACfC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGH,eAAe,CAAC;EAC3CI,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,YAAY,EAAE;MACZC,IAAI,EAAEH,OADM;MAEZI,OAAO,EAAEC;IAFG,CAJT;IAQLC,IAAI,EAAEpB,SARD;IASLqB,SAAS,EAAET,MATN;IAWL,GAAGb,gBAAgB,EAXd;IAYL,GAAGD,kBAAkB,EAZhB;IAaL,GAAGD,aAAa,EAbX;IAcL,GAAGD,YAAY,EAdV;IAeL,GAAGU,kBAAkB;EAfhB,CAHoC;;EAqB3CgB,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAMC,QAAQ,GAAGvB,MAAM,CAACP,eAAD,CAAvB;IAEA,IAAI,CAAC8B,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;IAEf,MAAM;MAAEC;IAAF,IAAsBnB,YAAY,CAACG,KAAD,CAAxC;IAEA,MAAMiB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;IACA,MAAM0B,MAAM,GAAG1B,GAAG,EAAlB;IACAC,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;MAAA;;MACxB,IAAI,CAACA,QAAL,EAAe;MACfF,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;IACD,CAHI,EAGF;MACDC,KAAK,EAAE;IADN,CAHE,CAAL;IAOA,OAAO;MAAA;;MAAA;QAAA,SAEI,CACL,iBADK,EAEL;UACE,6BAA6BzB,KAAK,CAACG;QADrC,CAFK,CAFJ;QAAA,SAQI;UACL,yBAAyBT,aAAa,CAACuB,OAAO,CAACG,KAAT;QADjC;MARJ;QAAA,SAaK,uBAbL;QAAA,SAcOJ,eAAe,CAACI;MAdvB,sBAgBCP,KAAK,CAACL,OAhBP,qBAgBC,oBAAAK,KAAK,CAhBN;QAAA,OAoBKK,MApBL;QAAA,WAqBSlB,KAAK,CAACK,OArBf;QAAA,QAsBML,KAAK,CAACU,IAtBZ;QAAA,aAuBWV,KAAK,CAACW,SAvBjB;QAAA,QAwBMX,KAAK,CAAC0B,IAxBZ;QAAA,aAyBW1B,KAAK,CAAC2B,SAzBjB;QAAA,YA0BU3B,KAAK,CAACC,QA1BhB;QAAA,WA2BSD,KAAK,CAACG,OA3Bf;QAAA,WA4BSH,KAAK,CAAC4B;MA5Bf,GA6BQ;QAAEpB,OAAO,EAAEK,KAAK,CAACH;MAAjB,CA7BR,GAgCDI,QAAQ,CAACe,OAAT,CAAiBT,KAAjB,KAA2B,SAA3B;QAAA,SACW;MADX,IAEI,CAACpB,KAAK,CAACM,YAAP,wBAAuBO,KAAK,CAACiB,QAA7B,qBAAuB,qBAAAjB,KAAK,CAA5B,CAFJ,EAhCC;IAAA,CAAP;EAuCD;;AA5E0C,CAAD,CAArC"}

package/lib/components/VTimeline/_variables.scss

@@ -10,7 +10,8 @@ $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-op
 $timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !default;
 $timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
 $timeline-dot-border-radius: 50% !default;
-$timeline-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
+$timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
 $timeline-inset-divider-line: var(--v-timeline-line-inset) !default;
 $timeline-inset-line-size: 4px !default;
 $timeline-item-grid-template: auto min-content auto !default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/index.ts"],"names":["VTimeline","VTimelineItem"],"mappings":"SAASA,S;SACAC,a","sourcesContent":["export { VTimeline } from './VTimeline'\nexport { VTimelineItem } from './VTimelineItem'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VTimeline","VTimelineItem"],"sources":["../../../src/components/VTimeline/index.ts"],"sourcesContent":["export { VTimeline } from './VTimeline'\nexport { VTimelineItem } from './VTimelineItem'\n"],"mappings":"SAASA,S;SACAC,a"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/shared.ts"],"names":["VTimelineSymbol","Symbol","for"],"mappings":"AAQA,OAAO,MAAMA,eAA+C,GAAGC,MAAM,CAACC,GAAP,CAAW,kBAAX,CAAxD","sourcesContent":["import type { InjectionKey, Ref } from 'vue'\nimport type { Density } from '@/composables/density'\n\nexport interface TimelineInstance {\n  density: Ref<Density>\n  lineColor: Ref<string>\n}\n\nexport const VTimelineSymbol: InjectionKey<TimelineInstance> = Symbol.for('vuetify:timeline')\n"],"file":"shared.mjs"}
+{"version":3,"file":"shared.mjs","names":["VTimelineSymbol","Symbol","for"],"sources":["../../../src/components/VTimeline/shared.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\nimport type { Density } from '@/composables/density'\n\nexport interface TimelineInstance {\n  density: Ref<Density>\n  lineColor: Ref<string>\n}\n\nexport const VTimelineSymbol: InjectionKey<TimelineInstance> = Symbol.for('vuetify:timeline')\n"],"mappings":"AAQA,OAAO,MAAMA,eAA+C,GAAGC,MAAM,CAACC,GAAP,CAAW,kBAAX,CAAxD"}

package/lib/components/VToolbar/VToolbar.css

@@ -8,13 +8,20 @@
   padding-inline-end: calc(16px + var(--v-scrollbar-offset));
   padding-inline-start: 16px;
   position: relative;
-  transition-property: height, transform, max-width;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: height, transform, max-width;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
   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);
   border-radius: 0;
   background: rgb(var(--v-theme-on-surface-variant));
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
 }
+.v-toolbar--border {
+  border-width: thin;
+  box-shadow: none;
+}
 .v-toolbar--density-default .v-toolbar__content {
   padding-top: 16px;
   padding-bottom: 16px;

package/lib/components/VToolbar/VToolbar.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VToolbar.css"; // Components
 
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VExpandTransition } from "../transitions/index.mjs";
 import { VImg } from "../VImg/index.mjs";
 import { VToolbarTitle } from "./VToolbarTitle.mjs"; // Composables
 
@@ -11,13 +12,13 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { provideDefaults } from "../../composables/defaults.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useForwardRef } from "../../composables/forwardRef.mjs"; // Utilities
 
-import { computed, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { convertToUnit, genericComponent, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
 
+import { provideDefaults } from "../../composables/defaults.mjs";
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
 export const makeVToolbarProps = propsFactory({
   absolute: Boolean,
@@ -54,6 +55,8 @@ export const VToolbar = genericComponent()({
   props: makeVToolbarProps(),
 
   setup(props, _ref) {
+    var _slots$extension;
+
     let {
       slots
     } = _ref;
@@ -73,24 +76,22 @@ export const VToolbar = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
-    const contentHeight = computed(() => Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0));
+    const isExtended = ref(!!(props.extended || (_slots$extension = slots.extension) != null && _slots$extension.call(slots)));
+    const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
+    const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
     provideDefaults({
       VBtn: {
         flat: true,
         variant: 'text'
-      },
-      VTextField: {
-        hideDetails: true
       }
-    }, {
-      scoped: true
     });
     useRender(() => {
-      var _slots$image, _slots$prepend, _slots$default, _slots$append, _slots$extension;
+      var _slots$extension2, _slots$image, _slots$prepend, _slots$default, _slots$append;
 
       const hasTitle = !!(props.title || slots.title);
       const hasImage = !!(slots.image || props.image);
-      const isExtended = !!(props.extended || slots.extension);
+      const extension = (_slots$extension2 = slots.extension) == null ? void 0 : _slots$extension2.call(slots);
+      isExtended.value = !!(props.extended || extension);
       return _createVNode(props.tag, {
         "class": ['v-toolbar', {
           'v-toolbar--absolute': props.absolute,
@@ -126,16 +127,19 @@ export const VToolbar = genericComponent()({
           text: slots.title
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.append && _createVNode("div", {
           "class": "v-toolbar__append"
-        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), isExtended && _createVNode("div", {
-          "class": "v-toolbar__extension",
-          "style": {
-            height: convertToUnit(props.extensionHeight)
-          }
-        }, [(_slots$extension = slots.extension) == null ? void 0 : _slots$extension.call(slots)])]
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]), _createVNode(VExpandTransition, null, {
+          default: () => [isExtended.value && _createVNode("div", {
+            "class": "v-toolbar__extension",
+            "style": {
+              height: convertToUnit(extensionHeight.value)
+            }
+          }, [extension])]
+        })]
       });
     });
     return useForwardRef({
-      contentHeight
+      contentHeight,
+      extensionHeight
     });
   }
 

package/lib/components/VToolbar/VToolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"names":["VDefaultsProvider","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useForwardRef","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","slots","borderClasses","elevationClasses","roundedClasses","themeClasses","backgroundColorClasses","backgroundColorStyles","contentHeight","VBtn","variant","VTextField","hideDetails","scoped","hasTitle","hasImage","isExtended","extension","value","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"mappings":"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","sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\nimport { VToolbarTitle } from './VToolbarTitle'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useForwardRef } from '@/composables/forwardRef'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, PropType } from 'vue'\n\nexport type Density = typeof allowedDensities[number]\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 56,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'v-toolbar')\n\nexport const VToolbar = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    image: [{ image: string }]\n    prepend: []\n    append: []\n    title: []\n    extension: []\n  }>\n}>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const contentHeight = computed(() => (\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ))\n\n    provideDefaults({\n      VBtn: {\n        flat: true,\n        variant: 'text',\n      },\n      VTextField: {\n        hideDetails: true,\n      },\n    }, { scoped: true })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n      const isExtended = !!(props.extended || slots.extension)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n          ]}\n        >\n          { hasImage && (\n            <div class=\"v-toolbar__image\">\n              <VDefaultsProvider\n                defaults={{\n                  VImg: {\n                    cover: true,\n                    src: props.image,\n                  },\n                }}\n                scoped\n              >\n                { slots.image ? slots.image?.() : (<VImg />) }\n              </VDefaultsProvider>\n            </div>\n          ) }\n\n          <div\n            class=\"v-toolbar__content\"\n            style={{ height: convertToUnit(contentHeight.value) }}\n          >\n            { slots.prepend && (\n              <div class=\"v-toolbar__prepend\">\n                { slots.prepend?.() }\n              </div>\n            ) }\n\n            { hasTitle && (\n              <VToolbarTitle text={ props.title }>\n                {{ text: slots.title }}\n              </VToolbarTitle>\n            ) }\n\n            { slots.default?.() }\n\n            { slots.append && (\n              <div class=\"v-toolbar__append\">\n                { slots.append?.() }\n              </div>\n            ) }\n          </div>\n\n          { isExtended && (\n            <div\n              class=\"v-toolbar__extension\"\n              style={{ height: convertToUnit(props.extensionHeight) }}\n            >\n              { slots.extension?.() }\n            </div>\n          ) }\n        </props.tag>\n      )\n    })\n\n    return useForwardRef({ contentHeight })\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n\nexport function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {\n  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)\n}\n"],"file":"VToolbar.mjs"}
+{"version":3,"file":"VToolbar.mjs","names":["VDefaultsProvider","VExpandTransition","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useForwardRef","computed","ref","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","provideDefaults","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","slots","borderClasses","elevationClasses","roundedClasses","themeClasses","backgroundColorClasses","backgroundColorStyles","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","cover","src","prepend","text","append","filterToolbarProps","Object","keys"],"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandTransition } from '@/components/transitions'\nimport { VImg } from '@/components/VImg'\nimport { VToolbarTitle } from './VToolbarTitle'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useForwardRef } from '@/composables/forwardRef'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { ExtractPropTypes, PropType } from 'vue'\nimport { provideDefaults } from '@/composables/defaults'\n\nexport type Density = typeof allowedDensities[number]\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 56,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'v-toolbar')\n\nexport const VToolbar = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: []\n    image: [{ image: string }]\n    prepend: []\n    append: []\n    title: []\n    extension: []\n  }>\n}>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n\n    const isExtended = ref(!!(props.extended || slots.extension?.()))\n    const contentHeight = computed(() => parseInt((\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ), 10))\n    const extensionHeight = computed(() => isExtended.value\n      ? parseInt((\n        Number(props.extensionHeight) +\n        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -\n        (props.density === 'comfortable' ? 4 : 0) -\n        (props.density === 'compact' ? 8 : 0)\n      ), 10)\n      : 0\n    )\n\n    provideDefaults({\n      VBtn: {\n        flat: true,\n        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      const extension = slots.extension?.()\n      isExtended.value = !!(props.extended || extension)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n          ]}\n        >\n          { hasImage && (\n            <div class=\"v-toolbar__image\">\n              <VDefaultsProvider\n                defaults={{\n                  VImg: {\n                    cover: true,\n                    src: props.image,\n                  },\n                }}\n                scoped\n              >\n                { slots.image ? slots.image?.() : (<VImg />) }\n              </VDefaultsProvider>\n            </div>\n          ) }\n\n          <div\n            class=\"v-toolbar__content\"\n            style={{ height: convertToUnit(contentHeight.value) }}\n          >\n            { slots.prepend && (\n              <div class=\"v-toolbar__prepend\">\n                { slots.prepend?.() }\n              </div>\n            ) }\n\n            { hasTitle && (\n              <VToolbarTitle text={ props.title }>\n                {{ text: slots.title }}\n              </VToolbarTitle>\n            ) }\n\n            { slots.default?.() }\n\n            { slots.append && (\n              <div class=\"v-toolbar__append\">\n                { slots.append?.() }\n              </div>\n            ) }\n          </div>\n\n          <VExpandTransition>\n            { isExtended.value && (\n              <div\n                class=\"v-toolbar__extension\"\n                style={{ height: convertToUnit(extensionHeight.value) }}\n              >\n                { extension }\n              </div>\n            ) }\n          </VExpandTransition>\n        </props.tag>\n      )\n    })\n\n    return useForwardRef({\n      contentHeight,\n      extensionHeight,\n    })\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n\nexport function filterToolbarProps (props: ExtractPropTypes<ReturnType<typeof makeVToolbarProps>>) {\n  return pick(props, Object.keys(VToolbar?.props ?? {}) as any)\n}\n"],"mappings":"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"}