@vuetify/nightly 4.0.0-dev-20230422.0 → 4.0.0-dev-20230427.0

package/lib/components/VTimeline/index.d.ts

@@ -16,12 +16,14 @@ declare const VTimeline: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
             justify: string;
             density: Density;
             lineInset: string | number;
             lineThickness: string | number;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
             justify: string;
             density: Density;
@@ -29,6 +31,7 @@ declare const VTimeline: {
             lineThickness: string | number;
         } & {
             direction?: TimelineDirection | undefined;
+            class?: any;
             align?: TimelineAlign | undefined;
             side?: TimelineSide;
             theme?: string | undefined;
@@ -38,15 +41,12 @@ declare const VTimeline: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag" | "justify" | "density" | "lineInset" | "lineThickness">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag" | "justify" | "density" | "lineInset" | "lineThickness">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -61,6 +61,7 @@ declare const VTimeline: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
             justify: string;
             density: Density;
@@ -68,6 +69,7 @@ declare const VTimeline: {
             lineThickness: string | number;
         } & {
             direction?: TimelineDirection | undefined;
+            class?: any;
             align?: TimelineAlign | undefined;
             side?: TimelineSide;
             theme?: string | undefined;
@@ -77,15 +79,13 @@ declare const VTimeline: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
             justify: string;
             density: Density;
@@ -112,6 +112,7 @@ declare const VTimeline: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        style: vue.StyleValue;
         tag: string;
         justify: string;
         density: Density;
@@ -119,6 +120,7 @@ declare const VTimeline: {
         lineThickness: string | number;
     } & {
         direction?: TimelineDirection | undefined;
+        class?: any;
         align?: TimelineAlign | undefined;
         side?: TimelineSide;
         theme?: string | undefined;
@@ -128,9 +130,6 @@ declare const VTimeline: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -141,6 +140,7 @@ declare const VTimeline: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
     justify: string;
     density: Density;
@@ -148,6 +148,7 @@ declare const VTimeline: {
     lineThickness: string | number;
 } & {
     direction?: TimelineDirection | undefined;
+    class?: any;
     align?: TimelineAlign | undefined;
     side?: TimelineSide;
     theme?: string | undefined;
@@ -157,15 +158,13 @@ declare const VTimeline: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
     justify: string;
     density: Density;
@@ -182,6 +181,11 @@ declare const VTimeline: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     align: Prop<TimelineAlign>;
     direction: Prop<TimelineDirection>;
     justify: {
@@ -211,6 +215,11 @@ declare const VTimeline: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     align: Prop<TimelineAlign>;
     direction: Prop<TimelineDirection>;
     justify: {
@@ -232,7 +241,7 @@ declare const VTimeline: {
 }>>;
 type VTimeline = InstanceType<typeof VTimeline>;
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VTimelineItem: {
@@ -240,6 +249,7 @@ declare const VTimelineItem: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             size: string | number;
             tag: string;
             rounded: string | number | boolean;
@@ -247,6 +257,7 @@ declare const VTimelineItem: {
             hideDot: boolean;
             hideOpposite: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             size: string | number;
             tag: string;
             fillDot: boolean;
@@ -258,6 +269,7 @@ declare const VTimelineItem: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            class?: any;
             icon?: IconValue | undefined;
             elevation?: string | number | undefined;
             rounded?: string | number | boolean | undefined;
@@ -267,16 +279,11 @@ declare const VTimelineItem: {
             iconColor?: string | undefined;
             hideOpposite?: boolean | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 icon?: (() => vue.VNodeChild) | undefined;
                 opposite?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                icon?: (() => vue.VNodeChild) | undefined;
-                opposite?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 icon?: false | (() => vue.VNodeChild) | undefined;
@@ -286,7 +293,7 @@ declare const VTimelineItem: {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:icon"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:opposite"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "size" | "tag" | "rounded" | "fillDot" | "hideDot" | "hideOpposite">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "size" | "tag" | "rounded" | "fillDot" | "hideDot" | "hideOpposite">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -301,6 +308,7 @@ declare const VTimelineItem: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             size: string | number;
             tag: string;
             fillDot: boolean;
@@ -312,6 +320,7 @@ declare const VTimelineItem: {
             maxWidth?: string | number | undefined;
             minHeight?: string | number | undefined;
             minWidth?: string | number | undefined;
+            class?: any;
             icon?: IconValue | undefined;
             elevation?: string | number | undefined;
             rounded?: string | number | boolean | undefined;
@@ -321,16 +330,11 @@ declare const VTimelineItem: {
             iconColor?: string | undefined;
             hideOpposite?: boolean | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 icon?: (() => vue.VNodeChild) | undefined;
                 opposite?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                icon?: (() => vue.VNodeChild) | undefined;
-                opposite?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 icon?: false | (() => vue.VNodeChild) | undefined;
@@ -341,6 +345,7 @@ declare const VTimelineItem: {
             "v-slot:icon"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:opposite"?: false | (() => vue.VNodeChild) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             size: string | number;
             tag: string;
             rounded: string | number | boolean;
@@ -368,6 +373,7 @@ declare const VTimelineItem: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        style: vue.StyleValue;
         size: string | number;
         tag: string;
         fillDot: boolean;
@@ -379,6 +385,7 @@ declare const VTimelineItem: {
         maxWidth?: string | number | undefined;
         minHeight?: string | number | undefined;
         minWidth?: string | number | undefined;
+        class?: any;
         icon?: IconValue | undefined;
         elevation?: string | number | undefined;
         rounded?: string | number | boolean | undefined;
@@ -388,16 +395,11 @@ declare const VTimelineItem: {
         iconColor?: string | undefined;
         hideOpposite?: boolean | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             icon?: (() => vue.VNodeChild) | undefined;
             opposite?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            icon?: (() => vue.VNodeChild) | undefined;
-            opposite?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             icon?: false | (() => vue.VNodeChild) | undefined;
@@ -412,6 +414,7 @@ declare const VTimelineItem: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     size: string | number;
     tag: string;
     fillDot: boolean;
@@ -423,6 +426,7 @@ declare const VTimelineItem: {
     maxWidth?: string | number | undefined;
     minHeight?: string | number | undefined;
     minWidth?: string | number | undefined;
+    class?: any;
     icon?: IconValue | undefined;
     elevation?: string | number | undefined;
     rounded?: string | number | boolean | undefined;
@@ -432,16 +436,11 @@ declare const VTimelineItem: {
     iconColor?: string | undefined;
     hideOpposite?: boolean | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         icon?: (() => vue.VNodeChild) | undefined;
         opposite?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        icon?: (() => vue.VNodeChild) | undefined;
-        opposite?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         icon?: false | (() => vue.VNodeChild) | undefined;
@@ -452,6 +451,7 @@ declare const VTimelineItem: {
     "v-slot:icon"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:opposite"?: false | (() => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     size: string | number;
     tag: string;
     rounded: string | number | boolean;
@@ -459,12 +459,6 @@ declare const VTimelineItem: {
     hideDot: boolean;
     hideOpposite: boolean;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
-    height: (StringConstructor | NumberConstructor)[];
-    maxHeight: (StringConstructor | NumberConstructor)[];
-    maxWidth: (StringConstructor | NumberConstructor)[];
-    minHeight: (StringConstructor | NumberConstructor)[];
-    minWidth: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
     tag: {
         type: StringConstructor;
         default: string;
@@ -473,13 +467,24 @@ declare const VTimelineItem: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     elevation: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     density: PropType<"default" | "compact">;
     dotColor: StringConstructor;
@@ -493,12 +498,6 @@ declare const VTimelineItem: {
     iconColor: StringConstructor;
     lineInset: (StringConstructor | NumberConstructor)[];
 }, vue.ExtractPropTypes<{
-    height: (StringConstructor | NumberConstructor)[];
-    maxHeight: (StringConstructor | NumberConstructor)[];
-    maxWidth: (StringConstructor | NumberConstructor)[];
-    minHeight: (StringConstructor | NumberConstructor)[];
-    minWidth: (StringConstructor | NumberConstructor)[];
-    width: (StringConstructor | NumberConstructor)[];
     tag: {
         type: StringConstructor;
         default: string;
@@ -507,13 +506,24 @@ declare const VTimelineItem: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     elevation: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     density: PropType<"default" | "compact">;
     dotColor: StringConstructor;

package/lib/components/VToolbar/VToolbar.mjs

@@ -8,6 +8,7 @@ import { VExpandTransition } from "../transitions/index.mjs";
 import { VImg } from "../VImg/index.mjs";
 import { VToolbarTitle } from "./VToolbarTitle.mjs"; // Composables
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
@@ -40,6 +41,7 @@ export const makeVToolbarProps = propsFactory({
   image: String,
   title: String,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
   ...makeTagProps({
@@ -90,8 +92,8 @@ export const VToolbar = genericComponent()({
           'v-toolbar--flat': props.flat,
           'v-toolbar--floating': props.floating,
           [`v-toolbar--density-${props.density}`]: true
-        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value],
-        "style": [backgroundColorStyles.value]
+        }, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, props.class],
+        "style": [backgroundColorStyles.value, props.style]
       }, {
         default: () => [hasImage && _createVNode("div", {
           "key": "image",

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

@@ -1 +1 @@
-{"version":3,"file":"VToolbar.mjs","names":["VDefaultsProvider","VExpandTransition","VImg","VToolbarTitle","makeBorderProps","useBorder","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","computed","ref","toRef","convertToUnit","genericComponent","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","_ref","slots","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","themeClasses","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","_createVNode","cover","src","VTabs","prepend","text","append"],"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 { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact'\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: 64,\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 type VToolbarSlots = MakeSlots<{\n  default: []\n  image: []\n  prepend: []\n  append: []\n  title: []\n  extension: []\n}>\n\nexport const VToolbar = genericComponent<VToolbarSlots>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\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        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 key=\"image\" class=\"v-toolbar__image\">\n              { !slots.image ? (\n                <VImg\n                  key=\"image-img\"\n                  cover\n                  src={ props.image }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"image-defaults\"\n                  disabled={ !props.image }\n                  defaults={{\n                    VImg: {\n                      cover: true,\n                      src: props.image,\n                    },\n                  }}\n                  v-slots:default={ slots.image }\n                />\n              )}\n            </div>\n          )}\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(contentHeight.value),\n              },\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 key=\"title\" 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          </VDefaultsProvider>\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(extensionHeight.value),\n              },\n            }}\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          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      contentHeight,\n      extensionHeight,\n    }\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n"],"mappings":"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"}
+{"version":3,"file":"VToolbar.mjs","names":["VDefaultsProvider","VExpandTransition","VImg","VToolbarTitle","makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","computed","ref","toRef","convertToUnit","genericComponent","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","_ref","slots","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","themeClasses","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","_createVNode","class","style","cover","src","VTabs","prepend","text","append"],"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 { makeComponentProps } from '@/composables/component'\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'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact'\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: 64,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'v-toolbar')\n\nexport type VToolbarSlots = {\n  default: []\n  image: []\n  prepend: []\n  append: []\n  title: []\n  extension: []\n}\n\nexport const VToolbar = genericComponent<VToolbarSlots>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\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        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            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasImage && (\n            <div key=\"image\" class=\"v-toolbar__image\">\n              { !slots.image ? (\n                <VImg\n                  key=\"image-img\"\n                  cover\n                  src={ props.image }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"image-defaults\"\n                  disabled={ !props.image }\n                  defaults={{\n                    VImg: {\n                      cover: true,\n                      src: props.image,\n                    },\n                  }}\n                  v-slots:default={ slots.image }\n                />\n              )}\n            </div>\n          )}\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(contentHeight.value),\n              },\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 key=\"title\" 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          </VDefaultsProvider>\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(extensionHeight.value),\n              },\n            }}\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          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      contentHeight,\n      extensionHeight,\n    }\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n"],"mappings":"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"}

package/lib/components/VToolbar/VToolbarItems.mjs

@@ -1,14 +1,18 @@
 import { createVNode as _createVNode } from "vue";
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeVariantProps } from "../../composables/variant.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 import { genericComponent, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue';
 export const VToolbarItems = genericComponent()({
   name: 'VToolbarItems',
-  props: makeVariantProps({
-    variant: 'text'
-  }),
+  props: {
+    ...makeComponentProps(),
+    ...makeVariantProps({
+      variant: 'text'
+    })
+  },
   setup(props, _ref) {
     let {
       slots
@@ -21,7 +25,8 @@ export const VToolbarItems = genericComponent()({
       }
     });
     useRender(() => _createVNode("div", {
-      "class": "v-toolbar-items"
+      "class": ['v-toolbar-items', props.class],
+      "style": props.style
     }, [slots.default?.()]));
     return {};
   }

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

@@ -1 +1 @@
-{"version":3,"file":"VToolbarItems.mjs","names":["makeVariantProps","provideDefaults","genericComponent","useRender","toRef","VToolbarItems","name","props","variant","setup","_ref","slots","VBtn","color","height","_createVNode","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = genericComponent()({\n  name: 'VToolbarItems',\n\n  props: makeVariantProps({ variant: 'text' }),\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        height: 'inherit',\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-toolbar-items\">\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;AAAA,SACSA,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AACpC,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,aAAa,GAAGH,gBAAgB,EAAE,CAAC;EAC9CI,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEP,gBAAgB,CAAC;IAAEQ,OAAO,EAAE;EAAO,CAAC,CAAC;EAE5CC,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBT,eAAe,CAAC;MACdW,IAAI,EAAE;QACJC,KAAK,EAAET,KAAK,CAACG,KAAK,EAAE,OAAO,CAAC;QAC5BO,MAAM,EAAE,SAAS;QACjBN,OAAO,EAAEJ,KAAK,CAACG,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFJ,SAAS,CAAC,MAAAY,YAAA;MAAA,SACG;IAAiB,IACxBJ,KAAK,CAACK,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VToolbarItems.mjs","names":["makeComponentProps","makeVariantProps","provideDefaults","genericComponent","useRender","toRef","VToolbarItems","name","props","variant","setup","_ref","slots","VBtn","color","height","_createVNode","class","style","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VToolbarItems = genericComponent()({\n  name: 'VToolbarItems',\n\n  props: {\n    ...makeComponentProps(),\n    ...makeVariantProps({ variant: 'text' }),\n  },\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        height: 'inherit',\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-toolbar-items',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AACpC,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,aAAa,GAAGH,gBAAgB,EAAE,CAAC;EAC9CI,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAE;IACL,GAAGR,kBAAkB,EAAE;IACvB,GAAGC,gBAAgB,CAAC;MAAEQ,OAAO,EAAE;IAAO,CAAC;EACzC,CAAC;EAEDC,KAAKA,CAAEF,KAAK,EAAAG,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBT,eAAe,CAAC;MACdW,IAAI,EAAE;QACJC,KAAK,EAAET,KAAK,CAACG,KAAK,EAAE,OAAO,CAAC;QAC5BO,MAAM,EAAE,SAAS;QACjBN,OAAO,EAAEJ,KAAK,CAACG,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFJ,SAAS,CAAC,MAAAY,YAAA;MAAA,SAEC,CACL,iBAAiB,EACjBR,KAAK,CAACS,KAAK,CACZ;MAAA,SACOT,KAAK,CAACU;IAAK,IAEjBN,KAAK,CAACO,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VToolbar/VToolbarTitle.mjs

@@ -1,9 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
-import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export const makeVToolbarTitleProps = propsFactory({
   text: String,
+  ...makeComponentProps(),
   ...makeTagProps()
 }, 'v-toolbar-title');
 export const VToolbarTitle = genericComponent()({
@@ -16,7 +18,8 @@ export const VToolbarTitle = genericComponent()({
     useRender(() => {
       const hasText = !!(slots.default || slots.text || props.text);
       return _createVNode(props.tag, {
-        "class": "v-toolbar-title"
+        "class": ['v-toolbar-title', props.class],
+        "style": props.style
       }, {
         default: () => [hasText && _createVNode("div", {
           "class": "v-toolbar-title__placeholder"

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

@@ -1 +1 @@
-{"version":3,"file":"VToolbarTitle.mjs","names":["makeTagProps","genericComponent","propsFactory","useRender","makeVToolbarTitleProps","text","String","VToolbarTitle","name","props","setup","_ref","slots","hasText","default","_createVNode","tag"],"sources":["../../../src/components/VToolbar/VToolbarTitle.tsx"],"sourcesContent":["// Composables\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\n\nexport const makeVToolbarTitleProps = propsFactory({\n  text: String,\n\n  ...makeTagProps(),\n}, 'v-toolbar-title')\n\nexport type VToolbarTitleSlots = MakeSlots<{\n  default: []\n  text: []\n}>\n\nexport const VToolbarTitle = genericComponent<VToolbarTitleSlots>()({\n  name: 'VToolbarTitle',\n\n  props: makeVToolbarTitleProps(),\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const hasText = !!(slots.default || slots.text || props.text)\n\n      return (\n        <props.tag class=\"v-toolbar-title\">\n          { hasText && (\n            <div class=\"v-toolbar-title__placeholder\">\n              { slots.text ? slots.text() : props.text }\n\n              { slots.default?.() }\n            </div>\n          )}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VToolbarTitle = InstanceType<typeof VToolbarTitle>\n"],"mappings":";AAAA;AAAA,SACSA,YAAY,qCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjDG,IAAI,EAAEC,MAAM;EAEZ,GAAGN,YAAY;AACjB,CAAC,EAAE,iBAAiB,CAAC;AAOrB,OAAO,MAAMO,aAAa,GAAGN,gBAAgB,EAAsB,CAAC;EAClEO,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEL,sBAAsB,EAAE;EAE/BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBR,SAAS,CAAC,MAAM;MACd,MAAMU,OAAO,GAAG,CAAC,EAAED,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACP,IAAI,IAAII,KAAK,CAACJ,IAAI,CAAC;MAE7D,OAAAU,YAAA,CAAAN,KAAA,CAAAO,GAAA;QAAA,SACmB;MAAiB;QAAAF,OAAA,EAAAA,CAAA,MAC9BD,OAAO,IAAAE,YAAA;UAAA,SACI;QAA8B,IACrCH,KAAK,CAACP,IAAI,GAAGO,KAAK,CAACP,IAAI,EAAE,GAAGI,KAAK,CAACJ,IAAI,EAEtCO,KAAK,CAACE,OAAO,IAAI,EAEtB;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VToolbarTitle.mjs","names":["makeComponentProps","makeTagProps","genericComponent","propsFactory","useRender","makeVToolbarTitleProps","text","String","VToolbarTitle","name","props","setup","_ref","slots","hasText","default","_createVNode","tag","class","style"],"sources":["../../../src/components/VToolbar/VToolbarTitle.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVToolbarTitleProps = propsFactory({\n  text: String,\n\n  ...makeComponentProps(),\n  ...makeTagProps(),\n}, 'v-toolbar-title')\n\nexport type VToolbarTitleSlots = {\n  default: []\n  text: []\n}\n\nexport const VToolbarTitle = genericComponent<VToolbarTitleSlots>()({\n  name: 'VToolbarTitle',\n\n  props: makeVToolbarTitleProps(),\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const hasText = !!(slots.default || slots.text || props.text)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar-title',\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          { hasText && (\n            <div class=\"v-toolbar-title__placeholder\">\n              { slots.text ? slots.text() : props.text }\n\n              { slots.default?.() }\n            </div>\n          )}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VToolbarTitle = InstanceType<typeof VToolbarTitle>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,qCAErB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjDG,IAAI,EAAEC,MAAM;EAEZ,GAAGP,kBAAkB,EAAE;EACvB,GAAGC,YAAY;AACjB,CAAC,EAAE,iBAAiB,CAAC;AAOrB,OAAO,MAAMO,aAAa,GAAGN,gBAAgB,EAAsB,CAAC;EAClEO,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEL,sBAAsB,EAAE;EAE/BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBR,SAAS,CAAC,MAAM;MACd,MAAMU,OAAO,GAAG,CAAC,EAAED,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACP,IAAI,IAAII,KAAK,CAACJ,IAAI,CAAC;MAE7D,OAAAU,YAAA,CAAAN,KAAA,CAAAO,GAAA;QAAA,SAEW,CACL,iBAAiB,EACjBP,KAAK,CAACQ,KAAK,CACZ;QAAA,SACOR,KAAK,CAACS;MAAK;QAAAJ,OAAA,EAAAA,CAAA,MAEjBD,OAAO,IAAAE,YAAA;UAAA,SACI;QAA8B,IACrCH,KAAK,CAACP,IAAI,GAAGO,KAAK,CAACP,IAAI,EAAE,GAAGI,KAAK,CAACJ,IAAI,EAEtCO,KAAK,CAACE,OAAO,IAAI,EAEtB;MAAA;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}