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

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -1,105 +1,83 @@
-// @ts-nocheck
+import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Components
+import { VTimelineSymbol } from "./shared.mjs";
+import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
 
-/* eslint-disable */
-// Types
-import mixins from "../../util/mixins.mjs";
-import VIcon from "../VIcon/index.mjs"; // Mixins
+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 Themeable from "../../mixins/themeable/index.mjs";
-import Colorable from "../../mixins/colorable/index.mjs";
-const baseMixins = mixins(Colorable, Themeable
-/* @vue/component */
-);
-export default baseMixins.extend().extend({
-  name: 'v-timeline-item',
-  inject: ['timeline'],
+import { inject, ref, watch } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
+export const VTimelineItem = defineComponent({
+  name: 'VTimelineItem',
   props: {
-    color: {
-      type: String,
-      default: 'primary'
-    },
+    dotColor: String,
     fillDot: Boolean,
     hideDot: Boolean,
+    hideOpposite: {
+      type: Boolean,
+      default: undefined
+    },
     icon: String,
     iconColor: String,
-    large: Boolean,
-    left: Boolean,
-    right: Boolean,
-    small: Boolean
-  },
-  computed: {
-    hasIcon() {
-      return !!this.icon || !!this.$slots.icon;
-    }
-
+    ...makeRoundedProps(),
+    ...makeElevationProps(),
+    ...makeSizeProps(),
+    ...makeTagProps(),
+    ...makeDimensionProps()
   },
-  methods: {
-    genBody() {
-      return this.$createElement('div', {
-        staticClass: 'v-timeline-item__body'
-      }, this.$slots.default);
-    },
-
-    genIcon() {
-      if (this.$slots.icon) {
-        return this.$slots.icon;
-      }
 
-      return this.$createElement(VIcon, {
-        props: {
-          color: this.iconColor,
-          dark: !this.theme.isDark,
-          small: this.small
-        }
-      }, this.icon);
-    },
+  setup(props, _ref) {
+    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;
 
-    genInnerDot() {
-      const data = this.setBackgroundColor(this.color);
-      return this.$createElement('div', {
-        staticClass: 'v-timeline-item__inner-dot',
-        ...data
-      }, [this.hasIcon && this.genIcon()]);
-    },
+      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;
+    }, {
+      flush: 'post'
+    });
+    return () => {
+      var _slots$default, _slots$opposite;
 
-    genDot() {
-      return this.$createElement('div', {
-        staticClass: 'v-timeline-item__dot',
-        class: {
-          'v-timeline-item__dot--small': this.small,
-          'v-timeline-item__dot--large': this.large
+      return _createVNode("div", {
+        "class": ['v-timeline-item', {
+          'v-timeline-item--fill-dot': props.fillDot
+        }],
+        "style": {
+          '--v-timeline-dot-size': convertToUnit(dotSize.value)
         }
-      }, [this.genInnerDot()]);
-    },
-
-    genDivider() {
-      const children = [];
-      if (!this.hideDot) children.push(this.genDot());
-      return this.$createElement('div', {
-        staticClass: 'v-timeline-item__divider'
-      }, children);
-    },
-
-    genOpposite() {
-      return this.$createElement('div', {
-        staticClass: 'v-timeline-item__opposite'
-      }, this.$slots.opposite);
-    }
-
-  },
-
-  render(h) {
-    const children = [this.genBody(), this.genDivider()];
-    if (this.$slots.opposite) children.push(this.genOpposite());
-    return h('div', {
-      staticClass: 'v-timeline-item',
-      class: {
-        'v-timeline-item--fill-dot': this.fillDot,
-        'v-timeline-item--before': this.timeline.reverse ? this.right : this.left,
-        'v-timeline-item--after': this.timeline.reverse ? this.left : this.right,
-        ...this.themeClasses
-      }
-    }, children);
+      }, [_createVNode("div", {
+        "class": "v-timeline-item__body",
+        "style": dimensionStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), _createVNode(VTimelineDivider, {
+        "ref": dotRef,
+        "hideDot": props.hideDot,
+        "icon": props.icon,
+        "iconColor": props.iconColor,
+        "size": props.size,
+        "elevation": props.elevation,
+        "dotColor": props.dotColor,
+        "fillDot": props.fillDot,
+        "rounded": props.rounded
+      }, {
+        default: slots.icon
+      }), timeline.density.value !== 'compact' && _createVNode("div", {
+        "class": "v-timeline-item__opposite"
+      }, [!props.hideOpposite && ((_slots$opposite = slots.opposite) == null ? void 0 : _slots$opposite.call(slots))])]);
+    };
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/VTimelineItem.ts"],"names":["mixins","VIcon","Themeable","Colorable","baseMixins","extend","name","inject","props","color","type","String","default","fillDot","Boolean","hideDot","icon","iconColor","large","left","right","small","computed","hasIcon","$slots","methods","genBody","$createElement","staticClass","genIcon","dark","theme","isDark","genInnerDot","data","setBackgroundColor","genDot","class","genDivider","children","push","genOpposite","opposite","render","h","timeline","reverse","themeClasses"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Types\nimport mixins, { ExtractVue } from '../../util/mixins'\nimport { VNode, VNodeData } from 'vue'\n\n// Components\nimport VTimeline from './VTimeline'\nimport VIcon from '../VIcon'\n\n// Mixins\nimport Themeable from '../../mixins/themeable'\nimport Colorable from '../../mixins/colorable'\n\nconst baseMixins = mixins(\n  Colorable,\n  Themeable\n/* @vue/component */\n)\n\ntype VTimelineInstance = InstanceType<typeof VTimeline>\n\ninterface options extends ExtractVue<typeof baseMixins> {\n  timeline: VTimelineInstance\n}\n\nexport default baseMixins.extend<options>().extend({\n  name: 'v-timeline-item',\n\n  inject: ['timeline'],\n\n  props: {\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    fillDot: Boolean,\n    hideDot: Boolean,\n    icon: String,\n    iconColor: String,\n    large: Boolean,\n    left: Boolean,\n    right: Boolean,\n    small: Boolean,\n  },\n\n  computed: {\n    hasIcon (): boolean {\n      return !!this.icon || !!this.$slots.icon\n    },\n  },\n\n  methods: {\n    genBody () {\n      return this.$createElement('div', {\n        staticClass: 'v-timeline-item__body',\n      }, this.$slots.default)\n    },\n    genIcon (): VNode | VNode[] {\n      if (this.$slots.icon) {\n        return this.$slots.icon\n      }\n\n      return this.$createElement(VIcon, {\n        props: {\n          color: this.iconColor,\n          dark: !this.theme.isDark,\n          small: this.small,\n        },\n      }, this.icon)\n    },\n    genInnerDot () {\n      const data: VNodeData = this.setBackgroundColor(this.color)\n\n      return this.$createElement('div', {\n        staticClass: 'v-timeline-item__inner-dot',\n        ...data,\n      }, [this.hasIcon && this.genIcon()])\n    },\n    genDot () {\n      return this.$createElement('div', {\n        staticClass: 'v-timeline-item__dot',\n        class: {\n          'v-timeline-item__dot--small': this.small,\n          'v-timeline-item__dot--large': this.large,\n        },\n      }, [this.genInnerDot()])\n    },\n    genDivider () {\n      const children = []\n\n      if (!this.hideDot) children.push(this.genDot())\n\n      return this.$createElement('div', {\n        staticClass: 'v-timeline-item__divider',\n      }, children)\n    },\n    genOpposite () {\n      return this.$createElement('div', {\n        staticClass: 'v-timeline-item__opposite',\n      }, this.$slots.opposite)\n    },\n  },\n\n  render (h): VNode {\n    const children = [\n      this.genBody(),\n      this.genDivider(),\n    ]\n\n    if (this.$slots.opposite) children.push(this.genOpposite())\n\n    return h('div', {\n      staticClass: 'v-timeline-item',\n      class: {\n        'v-timeline-item--fill-dot': this.fillDot,\n        'v-timeline-item--before': this.timeline.reverse ? this.right : this.left,\n        'v-timeline-item--after': this.timeline.reverse ? this.left : this.right,\n        ...this.themeClasses,\n      },\n    }, children)\n  },\n})\n"],"file":"VTimelineItem.mjs"}
+{"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"}

package/lib/components/VTimeline/_mixins.sass

@@ -1,42 +1,31 @@
-@mixin timeline-dots($dot-size, $inner-dot-size)
-  height: $dot-size
-  left: calc(50% - #{$dot-size / 2})
-  width: $dot-size
-
-  .v-timeline-item__inner-dot
-    height: $inner-dot-size
-    margin: #{($dot-size - $inner-dot-size) / 2}
-    width: $inner-dot-size
-
-@mixin timeline-wedge-align($direction)
-  .v-timeline-item__body
-    > .v-card:before, .v-card:after
-      +ltr()
-        transform: rotate(if($direction == right, 180deg, 0))
-        #{$direction}: -($timeline-wedge-size)
-        #{if($direction == left, right, left)}: initial
-
-      +rtl()
-        transform: rotate(if($direction == right, 0, 180deg))
-        #{$direction}: initial
-        #{if($direction == left, right, left)}: -($timeline-wedge-size)
+@use '../../styles/tools'
+@use './variables' as *
 
 @mixin timeline-item-align($direction)
-  flex-direction: if($direction == left, row-reverse, row)
+  .v-timeline-item__wrapper
+    flex-direction: if($direction == left, row-reverse, if($direction == right, row, if($direction == top, column-reverse, column)))
 
-  .v-timeline-item__opposite
-    +ltr()
-      text-align: if($direction == left, right, left)
+    .v-timeline-item__body
+      #{if($direction == right or $direction == left, justify-content, align-items)}: if($direction == left or $direction == top, flex-start, flex-end)
+      #{if($direction == top or $direction == bottom, max-height, max-width)}: calc(#{if($direction == top or $direction == left, '100% - ', '')}var(--v-timeline-line-position) - #{$timeline-divider-width * .5})
 
-    +rtl()
-      text-align: if($direction == left, left, right)
+    .v-timeline-item__opposite
+      #{if($direction == top or $direction == bottom, align-items, justify-content)}: #{if($direction == top or $direction == left, flex-end, flex-start)}
 
 @mixin timeline-line-align($center, $first, $second)
   &:before
-    +ltr()
-      #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
+    +tools.ltr()
+      #{$first}: calc(#{$center} - #{var(--v-timeline-line-width)} / 2)
       #{$second}: initial
 
-    +rtl()
+    +tools.rtl()
       #{$first}: initial
-      #{$second}: calc(#{$center} - #{$timeline-line-width / 2})
+      #{$second}: calc(#{$center} - #{var(--v-timeline-line-width)} / 2)
+
+@mixin vertical($immediate: false)
+  @at-root .v-timeline--vertical#{if($immediate, &, ' &')}
+    @content
+
+@mixin horizontal($immediate: false)
+  @at-root .v-timeline--horizontal#{if($immediate, &, ' &')}
+    @content

package/lib/components/VTimeline/_variables.scss

@@ -1,18 +1,31 @@
-@import '../../styles/styles.sass';
-
-$timeline-divider-center: 50% !default;
-$timeline-divider-width: 96px !default;
+@use '../../styles/tools';
 
+// Defaults
+$timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
+$timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
+$timeline-density-compact-grid-template-end: min-content auto !default;
+$timeline-density-compact-grid-template-start: auto min-content !default;
+$timeline-divider-dot-elevation: 0 !default;
+$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+$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-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;
 $timeline-item-padding: 24px !default;
+$timeline-dot-size: 38px !default;
 
-$timeline-line-width: 2px !default;
-
-$timeline-wedge-size: 10px !default;
-
-$timeline-dot-small-size: 24px !default;
-$timeline-dot-regular-size: 38px !default;
-$timeline-dot-large-size: 52px !default;
-
-$timeline-inner-dot-small-size: 18px !default;
-$timeline-inner-dot-regular-size: 30px !default;
-$timeline-inner-dot-large-size: 42px !default;
+$timeline-dot-border-sizes: () !default;
+$timeline-dot-border-sizes: tools.map-deep-merge(
+  (
+    'x-small': 6px,
+    'small': 8px,
+    'default': 8px,
+    'large': 8px,
+    'x-large': 10px,
+  ),
+  $timeline-dot-border-sizes
+);

package/lib/components/VTimeline/index.mjs

@@ -1,10 +1,3 @@
-import VTimeline from "./VTimeline.mjs";
-import VTimelineItem from "./VTimelineItem.mjs";
-export { VTimeline, VTimelineItem };
-export default {
-  $_vuetify_subcomponents: {
-    VTimeline,
-    VTimelineItem
-  }
-};
+export { VTimeline } from "./VTimeline.mjs";
+export { VTimelineItem } from "./VTimelineItem.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTimeline/index.ts"],"names":["VTimeline","VTimelineItem","$_vuetify_subcomponents"],"mappings":"OAAOA,S;OACAC,a;AAEP,SAASD,SAAT,EAAoBC,aAApB;AAEA,eAAe;AACbC,EAAAA,uBAAuB,EAAE;AACvBF,IAAAA,SADuB;AAEvBC,IAAAA;AAFuB;AADZ,CAAf","sourcesContent":["import VTimeline from './VTimeline'\nimport VTimelineItem from './VTimelineItem'\n\nexport { VTimeline, VTimelineItem }\n\nexport default {\n  $_vuetify_subcomponents: {\n    VTimeline,\n    VTimelineItem,\n  },\n}\n"],"file":"index.mjs"}
+{"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"}

package/lib/components/VTimeline/shared.mjs

@@ -0,0 +1,2 @@
+export const VTimelineSymbol = Symbol.for('vuetify:timeline');
+//# sourceMappingURL=shared.mjs.map

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

@@ -0,0 +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"}

package/lib/components/VToolbar/VToolbar.css

@@ -0,0 +1,145 @@
+.v-toolbar {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 100%;
+  overflow: hidden;
+  padding-inline-end: calc(16px + var(--v-scrollbar-offset));
+  padding-inline-start: 16px;
+  position: relative;
+  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;
+}
+
+.v-toolbar--density-comfortable .v-toolbar__content {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.v-toolbar--density-compact .v-toolbar__content {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.v-toolbar--density-prominent .v-toolbar__content {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.v-toolbar--absolute {
+  position: absolute;
+}
+.v-toolbar--collapse {
+  max-width: 112px;
+  overflow: hidden;
+}
+.v-toolbar--collapse .v-toolbar-title {
+  display: none;
+}
+.v-toolbar--collapse.v-locale--is-ltr, .v-locale--is-ltr .v-toolbar--collapse {
+  border-bottom-right-radius: 24px;
+}
+.v-toolbar--collapse.v-locale--is-rtl, .v-locale--is-rtl .v-toolbar--collapse {
+  border-bottom-left-radius: 24px;
+}
+.v-toolbar--flat {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.v-toolbar--floating {
+  display: inline-flex;
+}
+.v-toolbar--rounded {
+  border-radius: 4px;
+}
+
+.v-toolbar__content,
+.v-toolbar__extension {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  position: relative;
+  transition: inherit;
+  width: 100%;
+}
+
+.v-toolbar--density-prominent .v-toolbar__content {
+  align-items: flex-start;
+}
+
+.v-toolbar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.v-toolbar__prepend,
+.v-toolbar__append {
+  display: flex;
+}
+
+.v-toolbar__prepend {
+  margin-inline-end: auto;
+}
+.v-toolbar__prepend > .v-btn:first-child {
+  margin-inline-start: -12px;
+}
+.v-toolbar__prepend + .v-toolbar-title {
+  padding-inline-start: 20px;
+}
+
+.v-toolbar__append {
+  margin-inline-start: auto;
+}
+.v-toolbar__append > .v-btn:last-child {
+  margin-inline-end: -12px;
+}
+
+.v-toolbar-title {
+  flex: 1 1;
+  font-size: 1.25rem;
+  min-width: 0;
+  font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.75rem;
+  text-transform: none;
+}
+.v-toolbar--density-prominent .v-toolbar-title {
+  align-self: flex-end;
+  padding-bottom: 6px;
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 2.25rem;
+  text-transform: none;
+}
+
+.v-toolbar-title__placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v-toolbar-items {
+  display: flex;
+  height: inherit;
+}