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

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

@@ -13,7 +13,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 
 type Density = null | 'default' | 'comfortable' | 'compact';
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VBanner: {
@@ -21,12 +21,14 @@ declare const VBanner: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
             sticky: boolean;
             rounded: string | number | boolean;
             density: Density;
             stacked: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
             sticky: boolean;
             density: Density;
@@ -43,6 +45,7 @@ declare const VBanner: {
             minWidth?: string | number | undefined;
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
             text?: string | undefined;
+            class?: any;
             icon?: IconValue | undefined;
             elevation?: string | number | undefined;
             theme?: string | undefined;
@@ -50,18 +53,12 @@ declare const VBanner: {
             lines?: "one" | "two" | "three" | undefined;
             avatar?: string | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 text?: (() => vue.VNodeChild) | undefined;
                 actions?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                text?: (() => vue.VNodeChild) | undefined;
-                actions?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -73,7 +70,7 @@ declare const VBanner: {
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:actions"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag" | "sticky" | "rounded" | "density" | "stacked">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag" | "sticky" | "rounded" | "density" | "stacked">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -88,6 +85,7 @@ declare const VBanner: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
             sticky: boolean;
             density: Density;
@@ -104,6 +102,7 @@ declare const VBanner: {
             minWidth?: string | number | undefined;
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
             text?: string | undefined;
+            class?: any;
             icon?: IconValue | undefined;
             elevation?: string | number | undefined;
             theme?: string | undefined;
@@ -111,18 +110,12 @@ declare const VBanner: {
             lines?: "one" | "two" | "three" | undefined;
             avatar?: string | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 text?: (() => vue.VNodeChild) | undefined;
                 actions?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                text?: (() => vue.VNodeChild) | undefined;
-                actions?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -135,6 +128,7 @@ declare const VBanner: {
             "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:actions"?: false | (() => vue.VNodeChild) | undefined;
         }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
             sticky: boolean;
             rounded: string | number | boolean;
@@ -161,6 +155,7 @@ declare const VBanner: {
         $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;
         sticky: boolean;
         density: Density;
@@ -177,6 +172,7 @@ declare const VBanner: {
         minWidth?: string | number | undefined;
         position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
         text?: string | undefined;
+        class?: any;
         icon?: IconValue | undefined;
         elevation?: string | number | undefined;
         theme?: string | undefined;
@@ -184,18 +180,12 @@ declare const VBanner: {
         lines?: "one" | "two" | "three" | undefined;
         avatar?: string | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             prepend?: (() => vue.VNodeChild) | undefined;
             text?: (() => vue.VNodeChild) | undefined;
             actions?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            text?: (() => vue.VNodeChild) | undefined;
-            actions?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -212,6 +202,7 @@ declare const VBanner: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
     sticky: boolean;
     density: Density;
@@ -228,6 +219,7 @@ declare const VBanner: {
     minWidth?: string | number | undefined;
     position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
     text?: string | undefined;
+    class?: any;
     icon?: IconValue | undefined;
     elevation?: string | number | undefined;
     theme?: string | undefined;
@@ -235,18 +227,12 @@ declare const VBanner: {
     lines?: "one" | "two" | "three" | undefined;
     avatar?: string | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         prepend?: (() => vue.VNodeChild) | undefined;
         text?: (() => vue.VNodeChild) | undefined;
         actions?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        prepend?: (() => vue.VNodeChild) | undefined;
-        text?: (() => vue.VNodeChild) | undefined;
-        actions?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -259,6 +245,7 @@ declare const VBanner: {
     "v-slot:text"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:actions"?: false | (() => vue.VNodeChild) | undefined;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
     sticky: boolean;
     rounded: string | number | boolean;
@@ -294,6 +281,11 @@ declare const VBanner: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     avatar: StringConstructor;
     color: StringConstructor;
@@ -332,6 +324,11 @@ declare const VBanner: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     avatar: StringConstructor;
     color: StringConstructor;
@@ -347,22 +344,24 @@ declare const VBannerActions: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{}> & Omit<{} & {
+        $props: Partial<{
+            style: vue.StyleValue;
+        }> & Omit<{
+            style: vue.StyleValue;
+        } & {
             color?: string | undefined;
+            class?: any;
             density?: string | undefined;
         } & {
             $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, never>;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -376,22 +375,24 @@ declare const VBannerActions: {
         $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<{} & {
+        $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
+        } & {
             color?: string | undefined;
+            class?: any;
             density?: string | undefined;
         } & {
             $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, {}, {}, string> & {
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
+        }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -411,16 +412,16 @@ declare const VBannerActions: {
         $forceUpdate: () => void;
         $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;
+    } & {
         color?: string | undefined;
+        class?: any;
         density?: string | undefined;
     } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -430,25 +431,37 @@ declare const VBannerActions: {
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & vue.ComponentOptionsBase<{} & {
+} & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
+} & {
     color?: string | undefined;
+    class?: any;
     density?: string | undefined;
 } & {
     $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, {}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     density: StringConstructor;
 }, vue.ExtractPropTypes<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     density: StringConstructor;
 }>>;
@@ -459,22 +472,23 @@ declare const VBannerText: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
-        } & {} & {
+        } & {
+            class?: any;
+        } & {
             $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">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -489,14 +503,14 @@ declare const VBannerText: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
-        } & {} & {
+        } & {
+            class?: any;
+        } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -505,6 +519,7 @@ declare const VBannerText: {
         }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -527,14 +542,14 @@ declare const VBannerText: {
         $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;
-    } & {} & {
+    } & {
+        class?: any;
+    } & {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -547,14 +562,14 @@ declare const VBannerText: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
-} & {} & {
+} & {
+    class?: any;
+} & {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -563,13 +578,24 @@ declare const VBannerText: {
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     tag: {
         type: StringConstructor;
         default: string;
     };
 }, vue.ExtractPropTypes<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     tag: {
         type: StringConstructor;
         default: string;

package/lib/components/VBottomNavigation/VBottomNavigation.mjs

@@ -4,6 +4,7 @@ import "./VBottomNavigation.css";
 
 // Composables
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeGroupProps, useGroup } from "../../composables/group.mjs";
@@ -36,6 +37,7 @@ export const VBottomNavigation = genericComponent()({
       default: true
     },
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeElevationProps(),
     ...makeRoundedProps(),
@@ -110,11 +112,11 @@ export const VBottomNavigation = genericComponent()({
           'v-bottom-navigation--active': isActive.value,
           'v-bottom-navigation--grow': props.grow,
           'v-bottom-navigation--shift': props.mode === 'shift'
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value],
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": [backgroundColorStyles.value, layoutItemStyles.value, {
           height: convertToUnit(height.value),
           transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`
-        }, ssrBootStyles.value]
+        }, ssrBootStyles.value, props.style]
       }, {
         default: () => [slots.default && _createVNode("div", {
           "class": "v-bottom-navigation__content"

package/lib/components/VBottomNavigation/VBottomNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBottomNavigation.mjs","names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupProps","useGroup","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","provideDefaults","useBackgroundColor","useSsrBoot","computed","toRef","convertToUnit","genericComponent","useRender","VBtnToggleSymbol","VBottomNavigation","name","props","bgColor","String","color","grow","Boolean","mode","type","validator","v","includes","height","Number","default","active","tag","modelValue","selectedClass","emits","value","setup","_ref","slots","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","densityClasses","elevationClasses","roundedClasses","ssrBootStyles","density","isActive","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","absolute","VBtn","stacked","variant","scoped","_createVNode","transform"],"sources":["../../../src/components/VBottomNavigation/VBottomNavigation.tsx"],"sourcesContent":["// Styles\nimport './VBottomNavigation.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\n\nexport const VBottomNavigation = genericComponent()({\n  name: 'VBottomNavigation',\n\n  props: {\n    bgColor: String,\n    color: String,\n    grow: Boolean,\n    mode: {\n      type: String,\n      validator: (v: any) => !v || ['horizontal', 'shift'].includes(v),\n    },\n    height: {\n      type: [Number, String],\n      default: 56,\n    },\n    active: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeLayoutItemProps({ name: 'bottom-navigation' }),\n    ...makeTagProps({ tag: 'header' }),\n    ...makeGroupProps({\n      modelValue: true,\n      selectedClass: 'v-btn--selected',\n    }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => (\n      Number(props.height) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ))\n    const isActive = toRef(props, 'active')\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: computed(() => isActive.value ? height.value : 0),\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useGroup(props, VBtnToggleSymbol)\n\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        stacked: computed(() => props.mode !== 'horizontal'),\n        variant: 'text',\n      },\n    }, { scoped: true })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-bottom-navigation',\n            {\n              'v-bottom-navigation--active': isActive.value,\n              'v-bottom-navigation--grow': props.grow,\n              'v-bottom-navigation--shift': props.mode === 'shift',\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            layoutItemStyles.value,\n            {\n              height: convertToUnit(height.value),\n              transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`,\n            },\n            ssrBootStyles.value,\n          ]}\n        >\n          { slots.default && (\n            <div class=\"v-bottom-navigation__content\">\n              { slots.default() }\n            </div>\n          )}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBottomNavigation = InstanceType<typeof VBottomNavigation>\n"],"mappings":"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"}
+{"version":3,"file":"VBottomNavigation.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupProps","useGroup","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","useTheme","provideDefaults","useBackgroundColor","useSsrBoot","computed","toRef","convertToUnit","genericComponent","useRender","VBtnToggleSymbol","VBottomNavigation","name","props","bgColor","String","color","grow","Boolean","mode","type","validator","v","includes","height","Number","default","active","tag","modelValue","selectedClass","emits","value","setup","_ref","slots","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","densityClasses","elevationClasses","roundedClasses","ssrBootStyles","density","isActive","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","absolute","VBtn","stacked","variant","scoped","_createVNode","class","transform","style"],"sources":["../../../src/components/VBottomNavigation/VBottomNavigation.tsx"],"sourcesContent":["// Styles\nimport './VBottomNavigation.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, useRender } from '@/util'\n\n// Types\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\n\nexport const VBottomNavigation = genericComponent()({\n  name: 'VBottomNavigation',\n\n  props: {\n    bgColor: String,\n    color: String,\n    grow: Boolean,\n    mode: {\n      type: String,\n      validator: (v: any) => !v || ['horizontal', 'shift'].includes(v),\n    },\n    height: {\n      type: [Number, String],\n      default: 56,\n    },\n    active: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeComponentProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeLayoutItemProps({ name: 'bottom-navigation' }),\n    ...makeTagProps({ tag: 'header' }),\n    ...makeGroupProps({\n      modelValue: true,\n      selectedClass: 'v-btn--selected',\n    }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme()\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { densityClasses } = useDensity(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => (\n      Number(props.height) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ))\n    const isActive = toRef(props, 'active')\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: computed(() => 'bottom'),\n      layoutSize: computed(() => isActive.value ? height.value : 0),\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useGroup(props, VBtnToggleSymbol)\n\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        stacked: computed(() => props.mode !== 'horizontal'),\n        variant: 'text',\n      },\n    }, { scoped: true })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-bottom-navigation',\n            {\n              'v-bottom-navigation--active': isActive.value,\n              'v-bottom-navigation--grow': props.grow,\n              'v-bottom-navigation--shift': props.mode === 'shift',\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            layoutItemStyles.value,\n            {\n              height: convertToUnit(height.value),\n              transform: `translateY(${convertToUnit(!isActive.value ? 100 : 0, '%')})`,\n            },\n            ssrBootStyles.value,\n            props.style,\n          ]}\n        >\n          { slots.default && (\n            <div class=\"v-bottom-navigation__content\">\n              { slots.default() }\n            </div>\n          )}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBottomNavigation = InstanceType<typeof VBottomNavigation>\n"],"mappings":"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"}

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

@@ -17,6 +17,7 @@ declare const VBottomNavigation: {
             active: boolean;
             name: string;
             order: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -31,6 +32,7 @@ declare const VBottomNavigation: {
             active: boolean;
             name: string;
             order: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -41,6 +43,7 @@ declare const VBottomNavigation: {
             max?: number | undefined;
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             mode?: string | undefined;
             mandatory?: boolean | "force" | undefined;
             elevation?: string | number | undefined;
@@ -52,9 +55,6 @@ declare const VBottomNavigation: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -62,7 +62,7 @@ declare const VBottomNavigation: {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "absolute" | "height" | "active" | "name" | "order" | "disabled" | "multiple" | "tag" | "rounded" | "density" | "modelValue" | "selectedClass" | "grow">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "absolute" | "height" | "active" | "name" | "order" | "style" | "disabled" | "multiple" | "tag" | "rounded" | "density" | "modelValue" | "selectedClass" | "grow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -82,6 +82,7 @@ declare const VBottomNavigation: {
             active: boolean;
             name: string;
             order: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -92,6 +93,7 @@ declare const VBottomNavigation: {
             max?: number | undefined;
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             mode?: string | undefined;
             mandatory?: boolean | "force" | undefined;
             elevation?: string | number | undefined;
@@ -103,9 +105,6 @@ declare const VBottomNavigation: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -121,6 +120,7 @@ declare const VBottomNavigation: {
             active: boolean;
             name: string;
             order: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -155,6 +155,7 @@ declare const VBottomNavigation: {
         active: boolean;
         name: string;
         order: string | number;
+        style: vue.StyleValue;
         disabled: boolean;
         multiple: boolean;
         tag: string;
@@ -165,6 +166,7 @@ declare const VBottomNavigation: {
         max?: number | undefined;
         border?: string | number | boolean | undefined;
         color?: string | undefined;
+        class?: any;
         mode?: string | undefined;
         mandatory?: boolean | "force" | undefined;
         elevation?: string | number | undefined;
@@ -176,9 +178,6 @@ declare const VBottomNavigation: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -196,6 +195,7 @@ declare const VBottomNavigation: {
     active: boolean;
     name: string;
     order: string | number;
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
@@ -206,6 +206,7 @@ declare const VBottomNavigation: {
     max?: number | undefined;
     border?: string | number | boolean | undefined;
     color?: string | undefined;
+    class?: any;
     mode?: string | undefined;
     mandatory?: boolean | "force" | undefined;
     elevation?: string | number | undefined;
@@ -217,9 +218,6 @@ declare const VBottomNavigation: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -235,6 +233,7 @@ declare const VBottomNavigation: {
     active: boolean;
     name: string;
     order: string | number;
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
@@ -291,6 +290,11 @@ declare const VBottomNavigation: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     bgColor: StringConstructor;
     color: StringConstructor;
@@ -355,6 +359,11 @@ declare const VBottomNavigation: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     bgColor: StringConstructor;
     color: StringConstructor;