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

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

@@ -10,18 +10,21 @@ declare const VItemGroup: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
             modelValue: any;
             selectedClass: string;
         }> & Omit<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
             selectedClass: string;
         } & {
             max?: number | undefined;
+            class?: any;
             mandatory?: boolean | "force" | undefined;
             theme?: string | undefined;
             modelValue?: any;
@@ -29,9 +32,6 @@ declare const VItemGroup: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -39,7 +39,7 @@ declare const VItemGroup: {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "multiple" | "tag" | "modelValue" | "selectedClass">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "disabled" | "multiple" | "tag" | "modelValue" | "selectedClass">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -54,12 +54,14 @@ declare const VItemGroup: {
         $emit: (event: "update:modelValue", value: any) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
             selectedClass: string;
         } & {
             max?: number | undefined;
+            class?: any;
             mandatory?: boolean | "force" | undefined;
             theme?: string | undefined;
             modelValue?: any;
@@ -67,9 +69,6 @@ declare const VItemGroup: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -80,6 +79,7 @@ declare const VItemGroup: {
         }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             'update:modelValue': (value: any) => boolean;
         }, string, {
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -106,12 +106,14 @@ declare const VItemGroup: {
         $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;
         disabled: boolean;
         multiple: boolean;
         tag: string;
         selectedClass: string;
     } & {
         max?: number | undefined;
+        class?: any;
         mandatory?: boolean | "force" | undefined;
         theme?: string | undefined;
         modelValue?: any;
@@ -119,9 +121,6 @@ declare const VItemGroup: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -134,12 +133,14 @@ declare const VItemGroup: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
     selectedClass: string;
 } & {
     max?: number | undefined;
+    class?: any;
     mandatory?: boolean | "force" | undefined;
     theme?: string | undefined;
     modelValue?: any;
@@ -147,9 +148,6 @@ declare const VItemGroup: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -160,6 +158,7 @@ declare const VItemGroup: {
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (value: any) => boolean;
 }, string, {
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
@@ -183,6 +182,11 @@ declare const VItemGroup: {
         default: string;
     };
     disabled: BooleanConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
 }, vue.ExtractPropTypes<{
     theme: StringConstructor;
     tag: {
@@ -201,6 +205,11 @@ declare const VItemGroup: {
         default: string;
     };
     disabled: BooleanConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
 }>>;
 type VItemGroup = InstanceType<typeof VItemGroup>;
 
@@ -249,12 +258,9 @@ declare const VItem: {
             value?: any;
             selectedClass?: string | undefined;
         } & {
-            $children?: vue.VNodeChild | ((args_0: GroupItemProvide) => vue.VNodeChild) | {
-                default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-            };
-            $slots?: {
+            $children?: vue.VNodeChild | {
                 default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-            } | undefined;
+            } | ((args_0: GroupItemProvide) => vue.VNodeChild);
             'v-slots'?: {
                 default?: false | ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -286,12 +292,9 @@ declare const VItem: {
             value?: any;
             selectedClass?: string | undefined;
         } & {
-            $children?: vue.VNodeChild | ((args_0: GroupItemProvide) => vue.VNodeChild) | {
-                default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-            };
-            $slots?: {
+            $children?: vue.VNodeChild | {
                 default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-            } | undefined;
+            } | ((args_0: GroupItemProvide) => vue.VNodeChild);
             'v-slots'?: {
                 default?: false | ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -335,12 +338,9 @@ declare const VItem: {
         value?: any;
         selectedClass?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | ((args_0: GroupItemProvide) => vue.VNodeChild) | {
+        $children?: vue.VNodeChild | {
             default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-        };
-        $slots?: {
-            default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-        } | undefined;
+        } | ((args_0: GroupItemProvide) => vue.VNodeChild);
         'v-slots'?: {
             default?: false | ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
         } | undefined;
@@ -362,12 +362,9 @@ declare const VItem: {
     value?: any;
     selectedClass?: string | undefined;
 } & {
-    $children?: vue.VNodeChild | ((args_0: GroupItemProvide) => vue.VNodeChild) | {
+    $children?: vue.VNodeChild | {
         default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-    };
-    $slots?: {
-        default?: ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
-    } | undefined;
+    } | ((args_0: GroupItemProvide) => vue.VNodeChild);
     'v-slots'?: {
         default?: false | ((args_0: GroupItemProvide) => vue.VNodeChild) | undefined;
     } | undefined;

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

@@ -10,22 +10,23 @@ declare const VKbd: {
         $: 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;
         };
@@ -40,14 +41,14 @@ declare const VKbd: {
         $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;
@@ -56,6 +57,7 @@ declare const VKbd: {
         }, () => 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;
@@ -78,14 +80,14 @@ declare const VKbd: {
         $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;
@@ -98,14 +100,14 @@ declare const VKbd: {
     __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;
@@ -114,13 +116,24 @@ declare const VKbd: {
 }, () => 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/VLabel/VLabel.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VLabel.css";
 
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
 import { genericComponent, useRender } from "../../util/index.mjs";
 export const VLabel = genericComponent()({
@@ -10,6 +11,7 @@ export const VLabel = genericComponent()({
   props: {
     text: String,
     clickable: Boolean,
+    ...makeComponentProps(),
     ...makeThemeProps()
   },
   setup(props, _ref) {
@@ -19,7 +21,8 @@ export const VLabel = genericComponent()({
     useRender(() => _createVNode("label", {
       "class": ['v-label', {
         'v-label--clickable': props.clickable
-      }]
+      }, props.class],
+      "style": props.style
     }, [props.text, slots.default?.()]));
     return {};
   }

package/lib/components/VLabel/VLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VLabel.mjs","names":["makeThemeProps","genericComponent","useRender","VLabel","name","props","text","String","clickable","Boolean","setup","_ref","slots","_createVNode","default"],"sources":["../../../src/components/VLabel/VLabel.tsx"],"sourcesContent":["// Styles\nimport './VLabel.sass'\n\n// Composables\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\nexport const VLabel = genericComponent()({\n  name: 'VLabel',\n\n  props: {\n    text: String,\n    clickable: Boolean,\n\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <label\n        class={[\n          'v-label',\n          {\n            'v-label--clickable': props.clickable,\n          },\n        ]}\n      >\n        { props.text }\n\n        { slots.default?.() }\n      </label>\n    ))\n\n    return {}\n  },\n})\n\nexport type VLabel = InstanceType<typeof VLabel>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,cAAc,uCAEvB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,MAAM,GAAGF,gBAAgB,EAAE,CAAC;EACvCG,IAAI,EAAE,QAAQ;EAEdC,KAAK,EAAE;IACLC,IAAI,EAAEC,MAAM;IACZC,SAAS,EAAEC,OAAO;IAElB,GAAGT,cAAc;EACnB,CAAC;EAEDU,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBT,SAAS,CAAC,MAAAW,YAAA;MAAA,SAEC,CACL,SAAS,EACT;QACE,oBAAoB,EAAER,KAAK,CAACG;MAC9B,CAAC;IACF,IAECH,KAAK,CAACC,IAAI,EAEVM,KAAK,CAACE,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VLabel.mjs","names":["makeComponentProps","makeThemeProps","genericComponent","useRender","VLabel","name","props","text","String","clickable","Boolean","setup","_ref","slots","_createVNode","class","style","default"],"sources":["../../../src/components/VLabel/VLabel.tsx"],"sourcesContent":["// Styles\nimport './VLabel.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\nexport const VLabel = genericComponent()({\n  name: 'VLabel',\n\n  props: {\n    text: String,\n    clickable: Boolean,\n\n    ...makeComponentProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <label\n        class={[\n          'v-label',\n          {\n            'v-label--clickable': props.clickable,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { props.text }\n\n        { slots.default?.() }\n      </label>\n    ))\n\n    return {}\n  },\n})\n\nexport type VLabel = InstanceType<typeof VLabel>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,cAAc,uCAEvB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,MAAM,GAAGF,gBAAgB,EAAE,CAAC;EACvCG,IAAI,EAAE,QAAQ;EAEdC,KAAK,EAAE;IACLC,IAAI,EAAEC,MAAM;IACZC,SAAS,EAAEC,OAAO;IAElB,GAAGV,kBAAkB,EAAE;IACvB,GAAGC,cAAc;EACnB,CAAC;EAEDU,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBT,SAAS,CAAC,MAAAW,YAAA;MAAA,SAEC,CACL,SAAS,EACT;QACE,oBAAoB,EAAER,KAAK,CAACG;MAC9B,CAAC,EACDH,KAAK,CAACS,KAAK,CACZ;MAAA,SACOT,KAAK,CAACU;IAAK,IAEjBV,KAAK,CAACC,IAAI,EAEVM,KAAK,CAACI,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -10,25 +10,25 @@ declare const VLabel: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             clickable: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             clickable: boolean;
         } & {
             text?: string | undefined;
+            class?: any;
             theme?: 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, "clickable">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "clickable">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -43,23 +43,23 @@ declare const VLabel: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             clickable: boolean;
         } & {
             text?: string | undefined;
+            class?: any;
             theme?: 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, {
+            style: vue.StyleValue;
             clickable: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -82,17 +82,16 @@ declare const VLabel: {
         $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;
         clickable: boolean;
     } & {
         text?: string | undefined;
+        class?: any;
         theme?: 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;
@@ -103,30 +102,40 @@ declare const VLabel: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     clickable: boolean;
 } & {
     text?: string | undefined;
+    class?: any;
     theme?: 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, {
+    style: vue.StyleValue;
     clickable: boolean;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     theme: StringConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     text: StringConstructor;
     clickable: BooleanConstructor;
 }, vue.ExtractPropTypes<{
     theme: StringConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     text: StringConstructor;
     clickable: BooleanConstructor;
 }>>;

package/lib/components/VLayout/VLayout.mjs

@@ -3,11 +3,15 @@ import { createVNode as _createVNode } from "vue";
 import "./VLayout.css";
 
 // Composables
-import { createLayout, makeLayoutProps } from "../../composables/layout.mjs"; // Utilities
+import { createLayout, makeLayoutProps } from "../../composables/layout.mjs";
+import { makeComponentProps } from "../../composables/component.mjs"; // Utilities
 import { genericComponent, useRender } from "../../util/index.mjs";
 export const VLayout = genericComponent()({
   name: 'VLayout',
-  props: makeLayoutProps(),
+  props: {
+    ...makeComponentProps(),
+    ...makeLayoutProps()
+  },
   setup(props, _ref) {
     let {
       slots
@@ -21,8 +25,8 @@ export const VLayout = genericComponent()({
     } = createLayout(props);
     useRender(() => _createVNode("div", {
       "ref": layoutRef,
-      "class": layoutClasses.value,
-      "style": layoutStyles.value
+      "class": [layoutClasses.value, props.class],
+      "style": [layoutStyles.value, props.style]
     }, [slots.default?.()]));
     return {
       getLayoutItem,

package/lib/components/VLayout/VLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VLayout.mjs","names":["createLayout","makeLayoutProps","genericComponent","useRender","VLayout","name","props","setup","_ref","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","_createVNode","value","default"],"sources":["../../../src/components/VLayout/VLayout.tsx"],"sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\nexport const VLayout = genericComponent()({\n  name: 'VLayout',\n\n  props: makeLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n\n    useRender(() => (\n      <div ref={ layoutRef } class={ layoutClasses.value } style={ layoutStyles.value }>\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,YAAY,EAAEC,eAAe,wCAEtC;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,OAAO,GAAGF,gBAAgB,EAAE,CAAC;EACxCG,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEL,eAAe,EAAE;EAExBM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,aAAa;MAAEC,YAAY;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGd,YAAY,CAACM,KAAK,CAAC;IAE5FH,SAAS,CAAC,MAAAY,YAAA;MAAA,OACGD,SAAS;MAAA,SAAWJ,aAAa,CAACM,KAAK;MAAA,SAAWL,YAAY,CAACK;IAAK,IAC3EP,KAAK,CAACQ,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO;MACLL,aAAa;MACbC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VLayout.mjs","names":["createLayout","makeLayoutProps","makeComponentProps","genericComponent","useRender","VLayout","name","props","setup","_ref","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","_createVNode","value","class","style","default"],"sources":["../../../src/components/VLayout/VLayout.tsx"],"sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\n\nexport const VLayout = genericComponent()({\n  name: 'VLayout',\n\n  props: {\n    ...makeComponentProps(),\n    ...makeLayoutProps(),\n  },\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          layoutClasses.value,\n          props.class,\n        ]}\n        style={[\n          layoutStyles.value,\n          props.style,\n        ]}\n      >\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,YAAY,EAAEC,eAAe;AAAA,SAC7BC,kBAAkB,2CAE3B;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,OAAO,GAAGF,gBAAgB,EAAE,CAAC;EACxCG,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAE;IACL,GAAGL,kBAAkB,EAAE;IACvB,GAAGD,eAAe;EACpB,CAAC;EAEDO,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,aAAa;MAAEC,YAAY;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGf,YAAY,CAACO,KAAK,CAAC;IAE5FH,SAAS,CAAC,MAAAY,YAAA;MAAA,OAEAD,SAAS;MAAA,SACR,CACLJ,aAAa,CAACM,KAAK,EACnBV,KAAK,CAACW,KAAK,CACZ;MAAA,SACM,CACLN,YAAY,CAACK,KAAK,EAClBV,KAAK,CAACY,KAAK;IACZ,IAECT,KAAK,CAACU,OAAO,IAAI,EAEtB,CAAC;IAEF,OAAO;MACLP,aAAa;MACbC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/VLayout/VLayoutItem.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VLayoutItem.css";
 
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs"; // Utilities
 import { computed, toRef } from 'vue';
 import { genericComponent } from "../../util/index.mjs"; // Types
@@ -18,6 +19,7 @@ export const VLayoutItem = genericComponent()({
       default: 300
     },
     modelValue: Boolean,
+    ...makeComponentProps(),
     ...makeLayoutItemProps()
   },
   setup(props, _ref) {
@@ -36,8 +38,8 @@ export const VLayoutItem = genericComponent()({
       absolute: toRef(props, 'absolute')
     });
     return () => _createVNode("div", {
-      "class": ['v-layout-item'],
-      "style": layoutItemStyles.value
+      "class": ['v-layout-item', props.class],
+      "style": [layoutItemStyles.value, props.style]
     }, [slots.default?.()]);
   }
 });

package/lib/components/VLayout/VLayoutItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VLayoutItem.mjs","names":["makeLayoutItemProps","useLayoutItem","computed","toRef","genericComponent","VLayoutItem","name","props","position","type","String","required","size","Number","default","modelValue","Boolean","setup","_ref","slots","layoutItemStyles","id","order","parseInt","elementSize","layoutSize","active","absolute","_createVNode","value"],"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VLayoutItem = genericComponent()({\n  name: 'VLayoutItem',\n\n  props: {\n    position: {\n      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n      required: true,\n    },\n    size: {\n      type: [Number, String],\n      default: 300,\n    },\n    modelValue: Boolean,\n    ...makeLayoutItemProps(),\n  },\n\n  setup (props, { slots }) {\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'position'),\n      elementSize: toRef(props, 'size'),\n      layoutSize: toRef(props, 'size'),\n      active: toRef(props, 'modelValue'),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-layout-item',\n        ]}\n        style={ layoutItemStyles.value }\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n\nexport type VLayoutItem = InstanceType<typeof VLayoutItem>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,mBAAmB,EAAEC,aAAa,wCAE3C;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,gCAEzB;AAGA,OAAO,MAAMC,WAAW,GAAGD,gBAAgB,EAAE,CAAC;EAC5CE,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,MAAuD;MAC7DC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJH,IAAI,EAAE,CAACI,MAAM,EAAEH,MAAM,CAAC;MACtBI,OAAO,EAAE;IACX,CAAC;IACDC,UAAU,EAAEC,OAAO;IACnB,GAAGhB,mBAAmB;EACxB,CAAC;EAEDiB,KAAKA,CAAEV,KAAK,EAAAW,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAiB,CAAC,GAAGnB,aAAa,CAAC;MACzCoB,EAAE,EAAEd,KAAK,CAACD,IAAI;MACdgB,KAAK,EAAEpB,QAAQ,CAAC,MAAMqB,QAAQ,CAAChB,KAAK,CAACe,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDd,QAAQ,EAAEL,KAAK,CAACI,KAAK,EAAE,UAAU,CAAC;MAClCiB,WAAW,EAAErB,KAAK,CAACI,KAAK,EAAE,MAAM,CAAC;MACjCkB,UAAU,EAAEtB,KAAK,CAACI,KAAK,EAAE,MAAM,CAAC;MAChCmB,MAAM,EAAEvB,KAAK,CAACI,KAAK,EAAE,YAAY,CAAC;MAClCoB,QAAQ,EAAExB,KAAK,CAACI,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEF,OAAO,MAAAqB,YAAA;MAAA,SAEI,CACL,eAAe,CAChB;MAAA,SACOR,gBAAgB,CAACS;IAAK,IAE5BV,KAAK,CAACL,OAAO,IAAI,EAEtB;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VLayoutItem.mjs","names":["makeComponentProps","makeLayoutItemProps","useLayoutItem","computed","toRef","genericComponent","VLayoutItem","name","props","position","type","String","required","size","Number","default","modelValue","Boolean","setup","_ref","slots","layoutItemStyles","id","order","parseInt","elementSize","layoutSize","active","absolute","_createVNode","class","value","style"],"sources":["../../../src/components/VLayout/VLayoutItem.tsx"],"sourcesContent":["// Styles\nimport './VLayoutItem.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VLayoutItem = genericComponent()({\n  name: 'VLayoutItem',\n\n  props: {\n    position: {\n      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,\n      required: true,\n    },\n    size: {\n      type: [Number, String],\n      default: 300,\n    },\n    modelValue: Boolean,\n\n    ...makeComponentProps(),\n    ...makeLayoutItemProps(),\n  },\n\n  setup (props, { slots }) {\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'position'),\n      elementSize: toRef(props, 'size'),\n      layoutSize: toRef(props, 'size'),\n      active: toRef(props, 'modelValue'),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-layout-item',\n          props.class,\n        ]}\n        style={[\n          layoutItemStyles.value,\n          props.style,\n        ]}\n      >\n        { slots.default?.() }\n      </div>\n    )\n  },\n})\n\nexport type VLayoutItem = InstanceType<typeof VLayoutItem>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,mBAAmB,EAAEC,aAAa,wCAE3C;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,gCAEzB;AAGA,OAAO,MAAMC,WAAW,GAAGD,gBAAgB,EAAE,CAAC;EAC5CE,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAE;IACLC,QAAQ,EAAE;MACRC,IAAI,EAAEC,MAAuD;MAC7DC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJH,IAAI,EAAE,CAACI,MAAM,EAAEH,MAAM,CAAC;MACtBI,OAAO,EAAE;IACX,CAAC;IACDC,UAAU,EAAEC,OAAO;IAEnB,GAAGjB,kBAAkB,EAAE;IACvB,GAAGC,mBAAmB;EACxB,CAAC;EAEDiB,KAAKA,CAAEV,KAAK,EAAAW,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAiB,CAAC,GAAGnB,aAAa,CAAC;MACzCoB,EAAE,EAAEd,KAAK,CAACD,IAAI;MACdgB,KAAK,EAAEpB,QAAQ,CAAC,MAAMqB,QAAQ,CAAChB,KAAK,CAACe,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDd,QAAQ,EAAEL,KAAK,CAACI,KAAK,EAAE,UAAU,CAAC;MAClCiB,WAAW,EAAErB,KAAK,CAACI,KAAK,EAAE,MAAM,CAAC;MACjCkB,UAAU,EAAEtB,KAAK,CAACI,KAAK,EAAE,MAAM,CAAC;MAChCmB,MAAM,EAAEvB,KAAK,CAACI,KAAK,EAAE,YAAY,CAAC;MAClCoB,QAAQ,EAAExB,KAAK,CAACI,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEF,OAAO,MAAAqB,YAAA;MAAA,SAEI,CACL,eAAe,EACfrB,KAAK,CAACsB,KAAK,CACZ;MAAA,SACM,CACLT,gBAAgB,CAACU,KAAK,EACtBvB,KAAK,CAACwB,KAAK;IACZ,IAECZ,KAAK,CAACL,OAAO,IAAI,EAEtB;EACH;AACF,CAAC,CAAC"}