@vuetify/nightly 4.0.0-dev-20230511.0 → 4.0.0-dev-20230512.0

package/lib/components/VThemeProvider/VThemeProvider.mjs

@@ -6,15 +6,16 @@ import "./VThemeProvider.css";
 import { makeComponentProps } from "../../composables/component.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
-import { genericComponent } from "../../util/index.mjs";
+import { genericComponent, propsFactory } from "../../util/index.mjs";
+export const makeVThemeProviderProps = propsFactory({
+  withBackground: Boolean,
+  ...makeComponentProps(),
+  ...makeThemeProps(),
+  ...makeTagProps()
+}, 'v-theme-provider');
 export const VThemeProvider = genericComponent()({
   name: 'VThemeProvider',
-  props: {
-    withBackground: Boolean,
-    ...makeComponentProps(),
-    ...makeThemeProps(),
-    ...makeTagProps()
-  },
+  props: makeVThemeProviderProps(),
   setup(props, _ref) {
     let {
       slots

package/lib/components/VThemeProvider/VThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VThemeProvider.mjs","names":["makeComponentProps","makeTagProps","makeThemeProps","provideTheme","genericComponent","VThemeProvider","name","props","withBackground","Boolean","setup","_ref","slots","themeClasses","default","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VThemeProvider/VThemeProvider.tsx"],"sourcesContent":["// Styles\nimport './VThemeProvider.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent } from '@/util'\n\nexport const VThemeProvider = genericComponent()({\n  name: 'VThemeProvider',\n\n  props: {\n    withBackground: Boolean,\n\n    ...makeComponentProps(),\n    ...makeThemeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n\n    return () => {\n      if (!props.withBackground) return slots.default?.()\n\n      return (\n        <props.tag\n          class={[\n            'v-theme-provider',\n            themeClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { slots.default?.() }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VThemeProvider = InstanceType<typeof VThemeProvider>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,uCAErC;AAAA,SACSC,gBAAgB;AAEzB,OAAO,MAAMC,cAAc,GAAGD,gBAAgB,EAAE,CAAC;EAC/CE,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAE;IACLC,cAAc,EAAEC,OAAO;IAEvB,GAAGT,kBAAkB,EAAE;IACvB,GAAGE,cAAc,EAAE;IACnB,GAAGD,YAAY;EACjB,CAAC;EAEDS,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGV,YAAY,CAACI,KAAK,CAAC;IAE5C,OAAO,MAAM;MACX,IAAI,CAACA,KAAK,CAACC,cAAc,EAAE,OAAOI,KAAK,CAACE,OAAO,IAAI;MAEnD,OAAAC,YAAA,CAAAR,KAAA,CAAAS,GAAA;QAAA,SAEW,CACL,kBAAkB,EAClBH,YAAY,CAACI,KAAK,EAClBV,KAAK,CAACW,KAAK,CACZ;QAAA,SACOX,KAAK,CAACY;MAAK;QAAAL,OAAA,EAAAA,CAAA,MAEjBF,KAAK,CAACE,OAAO,IAAI;MAAA;IAGzB,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VThemeProvider.mjs","names":["makeComponentProps","makeTagProps","makeThemeProps","provideTheme","genericComponent","propsFactory","makeVThemeProviderProps","withBackground","Boolean","VThemeProvider","name","props","setup","_ref","slots","themeClasses","default","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VThemeProvider/VThemeProvider.tsx"],"sourcesContent":["// Styles\nimport './VThemeProvider.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent, propsFactory } from '@/util'\n\nexport const makeVThemeProviderProps = propsFactory({\n  withBackground: Boolean,\n\n  ...makeComponentProps(),\n  ...makeThemeProps(),\n  ...makeTagProps(),\n}, 'v-theme-provider')\n\nexport const VThemeProvider = genericComponent()({\n  name: 'VThemeProvider',\n\n  props: makeVThemeProviderProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n\n    return () => {\n      if (!props.withBackground) return slots.default?.()\n\n      return (\n        <props.tag\n          class={[\n            'v-theme-provider',\n            themeClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { slots.default?.() }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VThemeProvider = InstanceType<typeof VThemeProvider>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,uCAErC;AAAA,SACSC,gBAAgB,EAAEC,YAAY;AAEvC,OAAO,MAAMC,uBAAuB,GAAGD,YAAY,CAAC;EAClDE,cAAc,EAAEC,OAAO;EAEvB,GAAGR,kBAAkB,EAAE;EACvB,GAAGE,cAAc,EAAE;EACnB,GAAGD,YAAY;AACjB,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMQ,cAAc,GAAGL,gBAAgB,EAAE,CAAC;EAC/CM,IAAI,EAAE,gBAAgB;EAEtBC,KAAK,EAAEL,uBAAuB,EAAE;EAEhCM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGZ,YAAY,CAACQ,KAAK,CAAC;IAE5C,OAAO,MAAM;MACX,IAAI,CAACA,KAAK,CAACJ,cAAc,EAAE,OAAOO,KAAK,CAACE,OAAO,IAAI;MAEnD,OAAAC,YAAA,CAAAN,KAAA,CAAAO,GAAA;QAAA,SAEW,CACL,kBAAkB,EAClBH,YAAY,CAACI,KAAK,EAClBR,KAAK,CAACS,KAAK,CACZ;QAAA,SACOT,KAAK,CAACU;MAAK;QAAAL,OAAA,EAAAA,CAAA,MAEjBF,KAAK,CAACE,OAAO,IAAI;MAAA;IAGzB,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/VThemeProvider/index.d.mts

@@ -9,27 +9,62 @@ declare const VThemeProvider: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            style: vue.StyleValue;
-            tag: string;
-            withBackground: boolean;
-        }> & Omit<{
-            style: vue.StyleValue;
-            tag: string;
-            withBackground: boolean;
-        } & {
+        $props: {
+            style?: vue.StyleValue | undefined;
+            tag?: string | undefined;
+            withBackground?: boolean | undefined;
+            key?: string | number | symbol | undefined;
             class?: any;
-            theme?: string | undefined;
-        } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            theme?: string | undefined;
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag" | "withBackground">;
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -37,10 +72,12 @@ declare const VThemeProvider: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
         }>;
-        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -65,7 +102,11 @@ declare const VThemeProvider: {
             style: vue.StyleValue;
             tag: string;
             withBackground: boolean;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -80,7 +121,7 @@ declare const VThemeProvider: {
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof vue.nextTick;
@@ -129,7 +170,11 @@ declare const VThemeProvider: {
     style: vue.StyleValue;
     tag: string;
     withBackground: boolean;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     tag: {
         type: StringConstructor;
         default: string;

package/lib/components/VTimeline/VTimeline.mjs

@@ -7,49 +7,51 @@ import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useRtl } from "../../composables/locale.mjs"; // Utilities
 import { computed, toRef } from 'vue';
-import { convertToUnit, genericComponent, useRender } from "../../util/index.mjs"; // Types
+import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVTimelineProps = propsFactory({
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['center', 'start'].includes(v)
+  },
+  direction: {
+    type: String,
+    default: 'vertical',
+    validator: v => ['vertical', 'horizontal'].includes(v)
+  },
+  justify: {
+    type: String,
+    default: 'auto',
+    validator: v => ['auto', 'center'].includes(v)
+  },
+  side: {
+    type: String,
+    validator: v => v == null || ['start', 'end'].includes(v)
+  },
+  lineInset: {
+    type: [String, Number],
+    default: 0
+  },
+  lineThickness: {
+    type: [String, Number],
+    default: 2
+  },
+  lineColor: String,
+  truncateLine: {
+    type: String,
+    validator: v => ['start', 'end', 'both'].includes(v)
+  },
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'v-timeline');
 export const VTimeline = genericComponent()({
   name: 'VTimeline',
-  props: {
-    align: {
-      type: String,
-      default: 'center',
-      validator: v => ['center', 'start'].includes(v)
-    },
-    direction: {
-      type: String,
-      default: 'vertical',
-      validator: v => ['vertical', 'horizontal'].includes(v)
-    },
-    justify: {
-      type: String,
-      default: 'auto',
-      validator: v => ['auto', 'center'].includes(v)
-    },
-    side: {
-      type: String,
-      validator: v => v == null || ['start', 'end'].includes(v)
-    },
-    lineInset: {
-      type: [String, Number],
-      default: 0
-    },
-    lineThickness: {
-      type: [String, Number],
-      default: 2
-    },
-    lineColor: String,
-    truncateLine: {
-      type: String,
-      validator: v => ['start', 'end', 'both'].includes(v)
-    },
-    ...makeComponentProps(),
-    ...makeDensityProps(),
-    ...makeTagProps(),
-    ...makeThemeProps()
-  },
+  props: makeVTimelineProps(),
   setup(props, _ref) {
     let {
       slots
@@ -60,6 +62,9 @@ export const VTimeline = genericComponent()({
     const {
       densityClasses
     } = useDensity(props);
+    const {
+      rtlClasses
+    } = useRtl();
     provideDefaults({
       VTimelineDivider: {
         lineColor: toRef(props, 'lineColor')
@@ -89,7 +94,7 @@ export const VTimeline = genericComponent()({
     useRender(() => _createVNode(props.tag, {
       "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, `v-timeline--justify-${props.justify}`, truncateClasses.value, {
         'v-timeline--inset-line': !!props.lineInset
-      }, themeClasses.value, densityClasses.value, sideClasses.value, props.class],
+      }, themeClasses.value, densityClasses.value, sideClasses.value, rtlClasses.value, props.class],
       "style": [{
         '--v-timeline-line-thickness': convertToUnit(props.lineThickness)
       }, props.style]

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

@@ -1 +1 @@
-{"version":3,"file":"VTimeline.mjs","names":["makeComponentProps","makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","convertToUnit","genericComponent","useRender","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","justify","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","_ref","slots","themeClasses","densityClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = genericComponent()({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    justify: {\n      type: String,\n      default: 'auto',\n      validator: (v: any) => ['auto', 'center'].includes(v),\n    },\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeComponentProps(),\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        lineInset: toRef(props, 'lineInset'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimeline = InstanceType<typeof VTimeline>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,eAAe,0CAExB;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,aAAa,EAAEC,gBAAgB,EAAEC,SAAS,gCAEnD;AAQA,OAAO,MAAMC,SAAS,GAAGF,gBAAgB,EAAE,CAAC;EAC1CG,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE,QAAQ;MACjBC,SAAS,EAAGC,CAAM,IAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,CAAC;IACvD,CAAwB;IACxBE,SAAS,EAAE;MACTN,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE,UAAU;MACnBC,SAAS,EAAGC,CAAM,IAAK,CAAC,UAAU,EAAE,YAAY,CAAC,CAACC,QAAQ,CAACD,CAAC;IAC9D,CAA4B;IAC5BG,OAAO,EAAE;MACPP,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE,MAAM;MACfC,SAAS,EAAGC,CAAM,IAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACD,CAAC;IACtD,CAAC;IACDI,IAAI,EAAE;MACJR,IAAI,EAAEC,MAAM;MACZE,SAAS,EAAGC,CAAM,IAAKA,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAACC,QAAQ,CAACD,CAAC;IACjE,CAAuB;IACvBK,SAAS,EAAE;MACTT,IAAI,EAAE,CAACC,MAAM,EAAES,MAAM,CAAC;MACtBR,OAAO,EAAE;IACX,CAAC;IACDS,aAAa,EAAE;MACbX,IAAI,EAAE,CAACC,MAAM,EAAES,MAAM,CAAC;MACtBR,OAAO,EAAE;IACX,CAAC;IACDU,SAAS,EAAEX,MAAM;IACjBY,YAAY,EAAE;MACZb,IAAI,EAAEC,MAAM;MACZE,SAAS,EAAGC,CAAM,IAAK,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACD,CAAC;IAC5D,CAA+B;IAE/B,GAAGpB,kBAAkB,EAAE;IACvB,GAAGC,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAED0B,KAAKA,CAAEhB,KAAK,EAAAiB,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAG5B,YAAY,CAACS,KAAK,CAAC;IAC5C,MAAM;MAAEoB;IAAe,CAAC,GAAGhC,UAAU,CAACY,KAAK,CAAC;IAE5CR,eAAe,CAAC;MACd6B,gBAAgB,EAAE;QAChBP,SAAS,EAAEpB,KAAK,CAACM,KAAK,EAAE,WAAW;MACrC,CAAC;MACDsB,aAAa,EAAE;QACbC,OAAO,EAAE7B,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCW,SAAS,EAAEjB,KAAK,CAACM,KAAK,EAAE,WAAW;MACrC;IACF,CAAC,CAAC;IAEF,MAAMwB,WAAW,GAAG/B,QAAQ,CAAC,MAAM;MACjC,MAAMiB,IAAI,GAAGV,KAAK,CAACU,IAAI,GAAGV,KAAK,CAACU,IAAI,GAAGV,KAAK,CAACuB,OAAO,KAAK,SAAS,GAAG,KAAK,GAAG,IAAI;MAEjF,OAAOb,IAAI,IAAK,oBAAmBA,IAAK,EAAC;IAC3C,CAAC,CAAC;IAEF,MAAMe,eAAe,GAAGhC,QAAQ,CAAC,MAAM;MACrC,MAAMiC,OAAO,GAAG,CACd,iCAAiC,EACjC,+BAA+B,CAChC;MAED,QAAQ1B,KAAK,CAACe,YAAY;QACxB,KAAK,MAAM;UAAE,OAAOW,OAAO;QAC3B,KAAK,OAAO;UAAE,OAAOA,OAAO,CAAC,CAAC,CAAC;QAC/B,KAAK,KAAK;UAAE,OAAOA,OAAO,CAAC,CAAC,CAAC;QAC7B;UAAS,OAAO,IAAI;MAAA;IAExB,CAAC,CAAC;IAEF7B,SAAS,CAAC,MAAA8B,YAAA,CAAA3B,KAAA,CAAA4B,GAAA;MAAA,SAEC,CACL,YAAY,EACX,eAAc5B,KAAK,CAACQ,SAAU,EAAC,EAC/B,qBAAoBR,KAAK,CAACC,KAAM,EAAC,EACjC,uBAAsBD,KAAK,CAACS,OAAQ,EAAC,EACtCgB,eAAe,CAACI,KAAK,EACrB;QACE,wBAAwB,EAAE,CAAC,CAAC7B,KAAK,CAACW;MACpC,CAAC,EACDQ,YAAY,CAACU,KAAK,EAClBT,cAAc,CAACS,KAAK,EACpBL,WAAW,CAACK,KAAK,EACjB7B,KAAK,CAAC8B,KAAK,CACZ;MAAA,SACM,CACL;QACE,6BAA6B,EAAEnC,aAAa,CAACK,KAAK,CAACa,aAAa;MAClE,CAAC,EACDb,KAAK,CAAC+B,KAAK;IACZ,GACSb,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VTimeline.mjs","names":["makeComponentProps","makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useRtl","computed","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVTimelineProps","align","type","String","default","validator","v","includes","direction","justify","side","lineInset","Number","lineThickness","lineColor","truncateLine","VTimeline","name","props","setup","_ref","slots","themeClasses","densityClasses","rtlClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useRtl } from '@/composables/locale'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const makeVTimelineProps = propsFactory({\n  align: {\n    type: String,\n    default: 'center',\n    validator: (v: any) => ['center', 'start'].includes(v),\n  } as Prop<TimelineAlign>,\n  direction: {\n    type: String,\n    default: 'vertical',\n    validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n  } as Prop<TimelineDirection>,\n  justify: {\n    type: String,\n    default: 'auto',\n    validator: (v: any) => ['auto', 'center'].includes(v),\n  },\n  side: {\n    type: String,\n    validator: (v: any) => v == null || ['start', 'end'].includes(v),\n  } as Prop<TimelineSide>,\n  lineInset: {\n    type: [String, Number],\n    default: 0,\n  },\n  lineThickness: {\n    type: [String, Number],\n    default: 2,\n  },\n  lineColor: String,\n  truncateLine: {\n    type: String,\n    validator: (v: any) => ['start', 'end', 'both'].includes(v),\n  } as Prop<TimelineTruncateLine>,\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'v-timeline')\n\nexport const VTimeline = genericComponent()({\n  name: 'VTimeline',\n\n  props: makeVTimelineProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { rtlClasses } = useRtl()\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        lineInset: toRef(props, 'lineInset'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n          rtlClasses.value,\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimeline = InstanceType<typeof VTimeline>\n"],"mappings":"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"}

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -8,22 +8,23 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
-import { genericComponent, useRender } from "../../util/index.mjs";
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue';
+export const makeVTimelineDividerProps = propsFactory({
+  dotColor: String,
+  fillDot: Boolean,
+  hideDot: Boolean,
+  icon: IconValue,
+  iconColor: String,
+  lineColor: String,
+  ...makeComponentProps(),
+  ...makeRoundedProps(),
+  ...makeSizeProps(),
+  ...makeElevationProps()
+}, 'v-timeline-divider');
 export const VTimelineDivider = genericComponent()({
   name: 'VTimelineDivider',
-  props: {
-    dotColor: String,
-    fillDot: Boolean,
-    hideDot: Boolean,
-    icon: IconValue,
-    iconColor: String,
-    lineColor: String,
-    ...makeComponentProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeElevationProps()
-  },
+  props: makeVTimelineDividerProps(),
   setup(props, _ref) {
     let {
       slots

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

@@ -1 +1 @@
-{"version":3,"file":"VTimelineDivider.mjs","names":["VDefaultsProvider","VIcon","IconValue","makeComponentProps","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","useBackgroundColor","genericComponent","useRender","toRef","VTimelineDivider","name","props","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","setup","_ref","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","_createVNode","class","style","value","default","size","color"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VTimelineDivider = genericComponent()({\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    ...makeComponentProps(),\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    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={ props.style }\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 ? (\n                <VIcon\n                  key=\"icon\"\n                  color={ props.iconColor }\n                  icon={ props.icon }\n                  size={ props.size }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"icon-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      color: props.iconColor,\n                      icon: props.icon,\n                      size: props.size,\n                    },\n                  }}\n                  v-slots:default={ slots.default }\n                />\n              )}\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":"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"}
+{"version":3,"file":"VTimelineDivider.mjs","names":["VDefaultsProvider","VIcon","IconValue","makeComponentProps","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","useBackgroundColor","genericComponent","propsFactory","useRender","toRef","makeVTimelineDividerProps","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","VTimelineDivider","name","props","setup","_ref","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","_createVNode","class","style","value","default","size","color"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVTimelineDividerProps = propsFactory({\n  dotColor: String,\n  fillDot: Boolean,\n  hideDot: Boolean,\n  icon: IconValue,\n  iconColor: String,\n  lineColor: String,\n\n  ...makeComponentProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeElevationProps(),\n}, 'v-timeline-divider')\n\nexport const VTimelineDivider = genericComponent()({\n  name: 'VTimelineDivider',\n\n  props: makeVTimelineDividerProps(),\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    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={ props.style }\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 ? (\n                <VIcon\n                  key=\"icon\"\n                  color={ props.iconColor }\n                  icon={ props.icon }\n                  size={ props.size }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"icon-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      color: props.iconColor,\n                      icon: props.icon,\n                      size: props.size,\n                    },\n                  }}\n                  v-slots:default={ slots.default }\n                />\n              )}\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":"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"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -7,33 +7,34 @@ import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
-import { convertToUnit, genericComponent, useRender } from "../../util/index.mjs";
+import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
-import { ref, watch } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 
 // Types
 
+export const makeVTimelineItemProps = propsFactory({
+  density: String,
+  dotColor: String,
+  fillDot: Boolean,
+  hideDot: Boolean,
+  hideOpposite: {
+    type: Boolean,
+    default: undefined
+  },
+  icon: IconValue,
+  iconColor: String,
+  lineInset: [Number, String],
+  ...makeComponentProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeSizeProps(),
+  ...makeTagProps()
+}, 'v-timeline-item');
 export const VTimelineItem = genericComponent()({
   name: 'VTimelineItem',
-  props: {
-    density: String,
-    dotColor: String,
-    fillDot: Boolean,
-    hideDot: Boolean,
-    hideOpposite: {
-      type: Boolean,
-      default: undefined
-    },
-    icon: IconValue,
-    iconColor: String,
-    lineInset: [Number, String],
-    ...makeComponentProps(),
-    ...makeDimensionProps(),
-    ...makeElevationProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeTagProps()
-  },
+  props: makeVTimelineItemProps(),
   setup(props, _ref) {
     let {
       slots
@@ -41,7 +42,7 @@ export const VTimelineItem = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
-    const dotSize = ref(0);
+    const dotSize = shallowRef(0);
     const dotRef = ref();
     watch(dotRef, newValue => {
       if (!newValue) return;

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

@@ -1 +1 @@
-{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineDivider","IconValue","makeComponentProps","makeElevationProps","makeRoundedProps","makeSizeProps","makeTagProps","convertToUnit","genericComponent","useRender","makeDimensionProps","useDimension","ref","watch","VTimelineItem","name","props","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","setup","_ref","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","_createVNode","class","style","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { convertToUnit, genericComponent, useRender } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { ref, watch } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VTimelineItemSlots = {\n  default: []\n  icon: []\n  opposite: []\n}\n\nexport const VTimelineItem = genericComponent<VTimelineItemSlots>()({\n  name: 'VTimelineItem',\n\n  props: {\n    density: String as PropType<'default' | 'compact'>,\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    lineInset: [Number, String],\n\n    ...makeComponentProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\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    useRender(() => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-dot-size': convertToUnit(dotSize.value),\n            '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0),\n          },\n          props.style,\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        { props.density !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineItem = InstanceType<typeof VTimelineItem>\n"],"mappings":";AAAA;AAAA,SACSA,gBAAgB,kCAEzB;AAAA,SACSC,SAAS;AAAA,SACTC,kBAAkB;AAAA,SAClBC,kBAAkB;AAAA,SAClBC,gBAAgB;AAAA,SAChBC,aAAa;AAAA,SACbC,YAAY,qCAErB;AAAA,SACSC,aAAa,EAAEC,gBAAgB,EAAEC,SAAS;AAAA,SAC1CC,kBAAkB,EAAEC,YAAY;AACzC,SAASC,GAAG,EAAEC,KAAK,QAAQ,KAAK;;AAEhC;;AAUA,OAAO,MAAMC,aAAa,GAAGN,gBAAgB,EAAsB,CAAC;EAClEO,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAE;IACLC,OAAO,EAAEC,MAAyC;IAClDC,QAAQ,EAAED,MAAM;IAChBE,OAAO,EAAEC,OAAO;IAChBC,OAAO,EAAED,OAAO;IAChBE,YAAY,EAAE;MACZC,IAAI,EAAEH,OAAO;MACbI,OAAO,EAAEC;IACX,CAAC;IACDC,IAAI,EAAE1B,SAAS;IACf2B,SAAS,EAAEV,MAAM;IACjBW,SAAS,EAAE,CAACC,MAAM,EAAEZ,MAAM,CAAC;IAE3B,GAAGhB,kBAAkB,EAAE;IACvB,GAAGQ,kBAAkB,EAAE;IACvB,GAAGP,kBAAkB,EAAE;IACvB,GAAGC,gBAAgB,EAAE;IACrB,GAAGC,aAAa,EAAE;IAClB,GAAGC,YAAY;EACjB,CAAC;EAEDyB,KAAKA,CAAEf,KAAK,EAAAgB,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAgB,CAAC,GAAGvB,YAAY,CAACK,KAAK,CAAC;IAE/C,MAAMmB,OAAO,GAAGvB,GAAG,CAAC,CAAC,CAAC;IACtB,MAAMwB,MAAM,GAAGxB,GAAG,EAAoB;IACtCC,KAAK,CAACuB,MAAM,EAAEC,QAAQ,IAAI;MACxB,IAAI,CAACA,QAAQ,EAAE;MACfF,OAAO,CAACG,KAAK,GAAGD,QAAQ,CAACE,GAAG,CAACC,aAAa,CAAC,0BAA0B,CAAC,EAAEC,qBAAqB,EAAE,CAACC,KAAK,IAAI,CAAC;IAC5G,CAAC,EAAE;MACDC,KAAK,EAAE;IACT,CAAC,CAAC;IAEFlC,SAAS,CAAC,MAAAmC,YAAA;MAAA,SAEC,CACL,iBAAiB,EACjB;QACE,2BAA2B,EAAE5B,KAAK,CAACI;MACrC,CAAC,EACDJ,KAAK,CAAC6B,KAAK,CACZ;MAAA,SACM,CACL;QACE,uBAAuB,EAAEtC,aAAa,CAAC4B,OAAO,CAACG,KAAK,CAAC;QACrD,yBAAyB,EAAEtB,KAAK,CAACa,SAAS,GAAI,yCAAwCtB,aAAa,CAACS,KAAK,CAACa,SAAS,CAAE,GAAE,GAAGtB,aAAa,CAAC,CAAC;MAC3I,CAAC,EACDS,KAAK,CAAC8B,KAAK;IACZ,IAAAF,YAAA;MAAA,SAGO,uBAAuB;MAAA,SACrBV,eAAe,CAACI;IAAK,IAE3BL,KAAK,CAACR,OAAO,IAAI,IAAAmB,YAAA,CAAA5C,gBAAA;MAAA,OAIboC,MAAM;MAAA,WACFpB,KAAK,CAACM,OAAO;MAAA,QAChBN,KAAK,CAACW,IAAI;MAAA,aACLX,KAAK,CAACY,SAAS;MAAA,QACpBZ,KAAK,CAAC+B,IAAI;MAAA,aACL/B,KAAK,CAACgC,SAAS;MAAA,YAChBhC,KAAK,CAACG,QAAQ;MAAA,WACfH,KAAK,CAACI,OAAO;MAAA,WACbJ,KAAK,CAACiC;IAAO,GACd;MAAExB,OAAO,EAAEQ,KAAK,CAACN;IAAK,CAAC,GAGhCX,KAAK,CAACC,OAAO,KAAK,SAAS,IAAA2B,YAAA;MAAA,SAChB;IAA2B,IAClC,CAAC5B,KAAK,CAACO,YAAY,IAAIU,KAAK,CAACiB,QAAQ,IAAI,EAE9C,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineDivider","IconValue","makeComponentProps","makeElevationProps","makeRoundedProps","makeSizeProps","makeTagProps","convertToUnit","genericComponent","propsFactory","useRender","makeDimensionProps","useDimension","ref","shallowRef","watch","makeVTimelineItemProps","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","lineInset","Number","VTimelineItem","name","props","setup","_ref","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","_createVNode","class","style","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { ref, shallowRef, watch } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VTimelineItemSlots = {\n  default: []\n  icon: []\n  opposite: []\n}\n\nexport const makeVTimelineItemProps = propsFactory({\n  density: String as PropType<'default' | 'compact'>,\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  lineInset: [Number, String],\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n}, 'v-timeline-item')\n\nexport const VTimelineItem = genericComponent<VTimelineItemSlots>()({\n  name: 'VTimelineItem',\n\n  props: makeVTimelineItemProps(),\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = shallowRef(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    useRender(() => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-dot-size': convertToUnit(dotSize.value),\n            '--v-timeline-line-inset': props.lineInset ? `calc(var(--v-timeline-dot-size) / 2 + ${convertToUnit(props.lineInset)})` : convertToUnit(0),\n          },\n          props.style,\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        { props.density !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineItem = InstanceType<typeof VTimelineItem>\n"],"mappings":"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"}