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

package/lib/components/VMessages/VMessages.mjs

@@ -4,6 +4,7 @@ import "./VMessages.css";
 
 // Components
 import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
 import { computed } from 'vue';
@@ -17,6 +18,7 @@ export const VMessages = genericComponent()({
       type: [Array, String],
       default: () => []
     },
+    ...makeComponentProps(),
     ...makeTransitionProps({
       transition: {
         component: VSlideYTransition,
@@ -37,8 +39,8 @@ export const VMessages = genericComponent()({
     useRender(() => _createVNode(MaybeTransition, {
       "transition": props.transition,
       "tag": "div",
-      "class": ['v-messages', textColorClasses.value],
-      "style": textColorStyles.value,
+      "class": ['v-messages', textColorClasses.value, props.class],
+      "style": [textColorStyles.value, props.style],
       "role": "alert",
       "aria-live": "polite"
     }, {

package/lib/components/VMessages/VMessages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VMessages.mjs","names":["VSlideYTransition","makeTransitionProps","MaybeTransition","useTextColor","computed","genericComponent","useRender","wrapInArray","VMessages","name","props","active","Boolean","color","String","messages","type","Array","default","transition","component","leaveAbsolute","group","setup","_ref","slots","textColorClasses","textColorStyles","_createVNode","value","map","message","i"],"sources":["../../../src/components/VMessages/VMessages.tsx"],"sourcesContent":["// Styles\nimport './VMessages.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VMessageSlot = {\n  message: string\n}\n\nexport type VMessagesSlots = {\n  message: [VMessageSlot]\n}\n\nexport const VMessages = genericComponent<VMessagesSlots>()({\n  name: 'VMessages',\n\n  props: {\n    active: Boolean,\n    color: String,\n    messages: {\n      type: [Array, String] as PropType<string | string[]>,\n      default: () => ([]),\n    },\n\n    ...makeTransitionProps({\n      transition: {\n        component: VSlideYTransition,\n        leaveAbsolute: true,\n        group: true,\n      },\n    }),\n  },\n\n  setup (props, { slots }) {\n    const messages = computed(() => wrapInArray(props.messages))\n    const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color))\n\n    useRender(() => (\n      <MaybeTransition\n        transition={ props.transition }\n        tag=\"div\"\n        class={[\n          'v-messages',\n          textColorClasses.value,\n        ]}\n        style={ textColorStyles.value }\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        { props.active && (\n          messages.value.map((message, i) => (\n            <div\n              class=\"v-messages__message\"\n              key={ `${i}-${messages.value}` }\n            >\n              { slots.message ? slots.message({ message }) : message }\n            </div>\n          ))\n        )}\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VMessages = InstanceType<typeof VMessages>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,oCAE1B;AAAA,SACSC,mBAAmB,EAAEC,eAAe;AAAA,SACpCC,YAAY,uCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS,EAAEC,WAAW,gCAEjD;AAWA,OAAO,MAAMC,SAAS,GAAGH,gBAAgB,EAAkB,CAAC;EAC1DI,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAE;IACLC,MAAM,EAAEC,OAAO;IACfC,KAAK,EAAEC,MAAM;IACbC,QAAQ,EAAE;MACRC,IAAI,EAAE,CAACC,KAAK,EAAEH,MAAM,CAAgC;MACpDI,OAAO,EAAEA,CAAA,KAAO;IAClB,CAAC;IAED,GAAGjB,mBAAmB,CAAC;MACrBkB,UAAU,EAAE;QACVC,SAAS,EAAEpB,iBAAiB;QAC5BqB,aAAa,EAAE,IAAI;QACnBC,KAAK,EAAE;MACT;IACF,CAAC;EACH,CAAC;EAEDC,KAAKA,CAAEb,KAAK,EAAAc,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAMT,QAAQ,GAAGX,QAAQ,CAAC,MAAMG,WAAW,CAACG,KAAK,CAACK,QAAQ,CAAC,CAAC;IAC5D,MAAM;MAAEW,gBAAgB;MAAEC;IAAgB,CAAC,GAAGxB,YAAY,CAACC,QAAQ,CAAC,MAAMM,KAAK,CAACG,KAAK,CAAC,CAAC;IAEvFP,SAAS,CAAC,MAAAsB,YAAA,CAAA1B,eAAA;MAAA,cAEOQ,KAAK,CAACS,UAAU;MAAA,OACzB,KAAK;MAAA,SACF,CACL,YAAY,EACZO,gBAAgB,CAACG,KAAK,CACvB;MAAA,SACOF,eAAe,CAACE,KAAK;MAAA,QACxB,OAAO;MAAA,aACF;IAAQ;MAAAX,OAAA,EAAAA,CAAA,MAEhBR,KAAK,CAACC,MAAM,IACZI,QAAQ,CAACc,KAAK,CAACC,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAAJ,YAAA;QAAA,SAEpB,qBAAqB;QAAA,OACpB,GAAEI,CAAE,IAAGjB,QAAQ,CAACc,KAAM;MAAC,IAE5BJ,KAAK,CAACM,OAAO,GAAGN,KAAK,CAACM,OAAO,CAAC;QAAEA;MAAQ,CAAC,CAAC,GAAGA,OAAO,EAEzD,CACF;IAAA,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VMessages.mjs","names":["VSlideYTransition","makeComponentProps","makeTransitionProps","MaybeTransition","useTextColor","computed","genericComponent","useRender","wrapInArray","VMessages","name","props","active","Boolean","color","String","messages","type","Array","default","transition","component","leaveAbsolute","group","setup","_ref","slots","textColorClasses","textColorStyles","_createVNode","value","class","style","map","message","i"],"sources":["../../../src/components/VMessages/VMessages.tsx"],"sourcesContent":["// Styles\nimport './VMessages.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VMessageSlot = {\n  message: string\n}\n\nexport type VMessagesSlots = {\n  message: [VMessageSlot]\n}\n\nexport const VMessages = genericComponent<VMessagesSlots>()({\n  name: 'VMessages',\n\n  props: {\n    active: Boolean,\n    color: String,\n    messages: {\n      type: [Array, String] as PropType<string | string[]>,\n      default: () => ([]),\n    },\n\n    ...makeComponentProps(),\n    ...makeTransitionProps({\n      transition: {\n        component: VSlideYTransition,\n        leaveAbsolute: true,\n        group: true,\n      },\n    }),\n  },\n\n  setup (props, { slots }) {\n    const messages = computed(() => wrapInArray(props.messages))\n    const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color))\n\n    useRender(() => (\n      <MaybeTransition\n        transition={ props.transition }\n        tag=\"div\"\n        class={[\n          'v-messages',\n          textColorClasses.value,\n          props.class,\n        ]}\n        style={[\n          textColorStyles.value,\n          props.style,\n        ]}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        { props.active && (\n          messages.value.map((message, i) => (\n            <div\n              class=\"v-messages__message\"\n              key={ `${i}-${messages.value}` }\n            >\n              { slots.message ? slots.message({ message }) : message }\n            </div>\n          ))\n        )}\n      </MaybeTransition>\n    ))\n\n    return {}\n  },\n})\n\nexport type VMessages = InstanceType<typeof VMessages>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB,oCAE1B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,mBAAmB,EAAEC,eAAe;AAAA,SACpCC,YAAY,uCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS,EAAEC,WAAW,gCAEjD;AAWA,OAAO,MAAMC,SAAS,GAAGH,gBAAgB,EAAkB,CAAC;EAC1DI,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAE;IACLC,MAAM,EAAEC,OAAO;IACfC,KAAK,EAAEC,MAAM;IACbC,QAAQ,EAAE;MACRC,IAAI,EAAE,CAACC,KAAK,EAAEH,MAAM,CAAgC;MACpDI,OAAO,EAAEA,CAAA,KAAO;IAClB,CAAC;IAED,GAAGlB,kBAAkB,EAAE;IACvB,GAAGC,mBAAmB,CAAC;MACrBkB,UAAU,EAAE;QACVC,SAAS,EAAErB,iBAAiB;QAC5BsB,aAAa,EAAE,IAAI;QACnBC,KAAK,EAAE;MACT;IACF,CAAC;EACH,CAAC;EAEDC,KAAKA,CAAEb,KAAK,EAAAc,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAMT,QAAQ,GAAGX,QAAQ,CAAC,MAAMG,WAAW,CAACG,KAAK,CAACK,QAAQ,CAAC,CAAC;IAC5D,MAAM;MAAEW,gBAAgB;MAAEC;IAAgB,CAAC,GAAGxB,YAAY,CAACC,QAAQ,CAAC,MAAMM,KAAK,CAACG,KAAK,CAAC,CAAC;IAEvFP,SAAS,CAAC,MAAAsB,YAAA,CAAA1B,eAAA;MAAA,cAEOQ,KAAK,CAACS,UAAU;MAAA,OACzB,KAAK;MAAA,SACF,CACL,YAAY,EACZO,gBAAgB,CAACG,KAAK,EACtBnB,KAAK,CAACoB,KAAK,CACZ;MAAA,SACM,CACLH,eAAe,CAACE,KAAK,EACrBnB,KAAK,CAACqB,KAAK,CACZ;MAAA,QACI,OAAO;MAAA,aACF;IAAQ;MAAAb,OAAA,EAAAA,CAAA,MAEhBR,KAAK,CAACC,MAAM,IACZI,QAAQ,CAACc,KAAK,CAACG,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAAN,YAAA;QAAA,SAEpB,qBAAqB;QAAA,OACpB,GAAEM,CAAE,IAAGnB,QAAQ,CAACc,KAAM;MAAC,IAE5BJ,KAAK,CAACQ,OAAO,GAAGR,KAAK,CAACQ,OAAO,CAAC;QAAEA;MAAQ,CAAC,CAAC,GAAGA,OAAO,EAEzD,CACF;IAAA,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/VMessages/{index.d.ts → index.d.mts}

@@ -37,9 +37,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -70,9 +67,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -118,9 +112,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -143,9 +134,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -192,6 +180,7 @@ declare const VMessages: {
             } | NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
             })>;
+            style: vue.StyleValue;
             messages: string | string[];
         }> & Omit<{
             active: boolean;
@@ -218,9 +207,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -251,9 +237,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -299,9 +282,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -324,9 +304,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -373,22 +350,21 @@ declare const VMessages: {
             } | NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
             })>;
+            style: vue.StyleValue;
             messages: string | string[];
         } & {
             color?: string | undefined;
+            class?: any;
         } & {
             $children?: {} | vue.VNodeChild | {
                 message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:message"?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "active" | "transition" | "messages">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "active" | "transition" | "style" | "messages">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -427,9 +403,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -460,9 +433,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -508,9 +478,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -533,9 +500,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -582,16 +546,15 @@ declare const VMessages: {
             } | NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
             })>;
+            style: vue.StyleValue;
             messages: string | string[];
         } & {
             color?: string | undefined;
+            class?: any;
         } & {
             $children?: {} | vue.VNodeChild | {
                 message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -622,9 +585,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -655,9 +615,6 @@ declare const VMessages: {
                             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                                 default?: (() => vue.VNodeChild) | undefined;
                             };
-                            $slots?: {
-                                default?: (() => vue.VNodeChild) | undefined;
-                            } | undefined;
                             'v-slots'?: {
                                 default?: false | (() => vue.VNodeChild) | undefined;
                             } | undefined;
@@ -703,9 +660,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -728,9 +682,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -777,6 +728,7 @@ declare const VMessages: {
             } | NonNullable<string | boolean | (vue.TransitionProps & {
                 component?: vue.Component | undefined;
             })>;
+            style: vue.StyleValue;
             messages: string | string[];
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -823,9 +775,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -856,9 +805,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -904,9 +850,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -929,9 +872,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -978,16 +918,15 @@ declare const VMessages: {
         } | NonNullable<string | boolean | (vue.TransitionProps & {
             component?: vue.Component | undefined;
         })>;
+        style: vue.StyleValue;
         messages: string | string[];
     } & {
         color?: string | undefined;
+        class?: any;
     } & {
         $children?: {} | vue.VNodeChild | {
             message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         } | undefined;
@@ -1022,9 +961,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1055,9 +991,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1103,9 +1036,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1128,9 +1058,6 @@ declare const VMessages: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -1177,16 +1104,15 @@ declare const VMessages: {
     } | NonNullable<string | boolean | (vue.TransitionProps & {
         component?: vue.Component | undefined;
     })>;
+    style: vue.StyleValue;
     messages: string | string[];
 } & {
     color?: string | undefined;
+    class?: any;
 } & {
     $children?: {} | vue.VNodeChild | {
         message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
     } | undefined;
@@ -1217,9 +1143,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1250,9 +1173,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1298,9 +1218,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1323,9 +1240,6 @@ declare const VMessages: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -1372,6 +1286,7 @@ declare const VMessages: {
     } | NonNullable<string | boolean | (vue.TransitionProps & {
         component?: vue.Component | undefined;
     })>;
+    style: vue.StyleValue;
     messages: string | string[];
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     transition: Omit<{
@@ -1404,9 +1319,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1437,9 +1349,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1485,9 +1394,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1510,9 +1416,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1582,9 +1485,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1615,9 +1515,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1663,9 +1560,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1688,9 +1582,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1738,6 +1629,11 @@ declare const VMessages: {
             component?: vue.Component | undefined;
         })>;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     active: BooleanConstructor;
     color: StringConstructor;
     messages: {
@@ -1775,9 +1671,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1808,9 +1701,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1856,9 +1746,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -1881,9 +1768,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -1953,9 +1837,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -1986,9 +1867,6 @@ declare const VMessages: {
                         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                             default?: (() => vue.VNodeChild) | undefined;
                         };
-                        $slots?: {
-                            default?: (() => vue.VNodeChild) | undefined;
-                        } | undefined;
                         'v-slots'?: {
                             default?: false | (() => vue.VNodeChild) | undefined;
                         } | undefined;
@@ -2034,9 +1912,6 @@ declare const VMessages: {
                     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                         default?: (() => vue.VNodeChild) | undefined;
                     };
-                    $slots?: {
-                        default?: (() => vue.VNodeChild) | undefined;
-                    } | undefined;
                     'v-slots'?: {
                         default?: false | (() => vue.VNodeChild) | undefined;
                     } | undefined;
@@ -2059,9 +1934,6 @@ declare const VMessages: {
                 $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                     default?: (() => vue.VNodeChild) | undefined;
                 };
-                $slots?: {
-                    default?: (() => vue.VNodeChild) | undefined;
-                } | undefined;
                 'v-slots'?: {
                     default?: false | (() => vue.VNodeChild) | undefined;
                 } | undefined;
@@ -2109,6 +1981,11 @@ declare const VMessages: {
             component?: vue.Component | undefined;
         })>;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     active: BooleanConstructor;
     color: StringConstructor;
     messages: {

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -4,6 +4,7 @@ import "./VNavigationDrawer.css";
 
 // Composables
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
@@ -19,7 +20,7 @@ import { useSsrBoot } from "../../composables/ssrBoot.mjs";
 import { useSticky } from "./sticky.mjs";
 import { useTouch } from "./touch.mjs"; // Utilities
 import { computed, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
-import { convertToUnit, genericComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
 const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
 export const VNavigationDrawer = genericComponent()({
   name: 'VNavigationDrawer',
@@ -60,6 +61,7 @@ export const VNavigationDrawer = genericComponent()({
     },
     sticky: Boolean,
     ...makeBorderProps(),
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -148,7 +150,6 @@ export const VNavigationDrawer = genericComponent()({
     });
     const {
       layoutItemStyles,
-      layoutRect,
       layoutItemScrimStyles
     } = useLayoutItem({
       id: props.name,
@@ -178,12 +179,6 @@ export const VNavigationDrawer = genericComponent()({
         opacity: dragProgress.value * 0.2,
         transition: 'none'
       } : undefined),
-      ...(layoutRect.value ? {
-        left: convertToUnit(layoutRect.value.left),
-        right: convertToUnit(layoutRect.value.right),
-        top: convertToUnit(layoutRect.value.top),
-        bottom: convertToUnit(layoutRect.value.bottom)
-      } : undefined),
       ...layoutItemScrimStyles.value
     }));
     provideDefaults({
@@ -211,8 +206,8 @@ export const VNavigationDrawer = genericComponent()({
           'v-navigation-drawer--temporary': isTemporary.value,
           'v-navigation-drawer--active': isActive.value,
           'v-navigation-drawer--sticky': isSticky.value
-        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value]
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style]
       }, attrs), {
         default: () => [hasImage && _createVNode("div", {
           "key": "image",