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

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

@@ -38,7 +38,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
 }
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VBtn: {
@@ -52,6 +52,7 @@ declare const VBtn: {
             exact: boolean;
             block: boolean;
             active: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -66,6 +67,7 @@ declare const VBtn: {
             flat: boolean;
             exact: boolean;
             block: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -88,6 +90,7 @@ declare const VBtn: {
             value?: any;
             loading?: string | boolean | undefined;
             text?: string | undefined;
+            class?: any;
             icon?: boolean | IconValue | undefined;
             href?: string | undefined;
             elevation?: string | number | undefined;
@@ -98,18 +101,12 @@ declare const VBtn: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -125,7 +122,7 @@ declare const VBtn: {
             "onGroup:selected"?: ((val: {
                 value: boolean;
             }) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "symbol" | "replace" | "flat" | "exact" | "block" | "active" | "disabled" | "size" | "tag" | "rounded" | "density" | "variant" | "stacked" | "ripple">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "symbol" | "replace" | "flat" | "exact" | "block" | "active" | "style" | "disabled" | "size" | "tag" | "rounded" | "density" | "variant" | "stacked" | "ripple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -147,6 +144,7 @@ declare const VBtn: {
             flat: boolean;
             exact: boolean;
             block: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -169,6 +167,7 @@ declare const VBtn: {
             value?: any;
             loading?: string | boolean | undefined;
             text?: string | undefined;
+            class?: any;
             icon?: boolean | IconValue | undefined;
             href?: string | undefined;
             elevation?: string | number | undefined;
@@ -179,18 +178,12 @@ declare const VBtn: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -217,6 +210,7 @@ declare const VBtn: {
             exact: boolean;
             block: boolean;
             active: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -251,6 +245,7 @@ declare const VBtn: {
         flat: boolean;
         exact: boolean;
         block: boolean;
+        style: vue.StyleValue;
         disabled: boolean;
         size: string | number;
         tag: string;
@@ -273,6 +268,7 @@ declare const VBtn: {
         value?: any;
         loading?: string | boolean | undefined;
         text?: string | undefined;
+        class?: any;
         icon?: boolean | IconValue | undefined;
         href?: string | undefined;
         elevation?: string | number | undefined;
@@ -283,18 +279,12 @@ declare const VBtn: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             prepend?: (() => vue.VNodeChild) | undefined;
             append?: (() => vue.VNodeChild) | undefined;
             loader?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            loader?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -320,6 +310,7 @@ declare const VBtn: {
     flat: boolean;
     exact: boolean;
     block: boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     tag: string;
@@ -342,6 +333,7 @@ declare const VBtn: {
     value?: any;
     loading?: string | boolean | undefined;
     text?: string | undefined;
+    class?: any;
     icon?: boolean | IconValue | undefined;
     href?: string | undefined;
     elevation?: string | number | undefined;
@@ -352,18 +344,12 @@ declare const VBtn: {
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         prepend?: (() => vue.VNodeChild) | undefined;
         append?: (() => vue.VNodeChild) | undefined;
         loader?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        prepend?: (() => vue.VNodeChild) | undefined;
-        append?: (() => vue.VNodeChild) | undefined;
-        loader?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -390,6 +376,7 @@ declare const VBtn: {
     exact: boolean;
     block: boolean;
     active: boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     tag: string;
@@ -424,6 +411,10 @@ declare const VBtn: {
     replace: BooleanConstructor;
     to: PropType<vue_router.RouteLocationRaw>;
     exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     position: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
@@ -448,9 +439,10 @@ declare const VBtn: {
         default: string;
         validator: (v: any) => boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     active: {
@@ -498,6 +490,10 @@ declare const VBtn: {
     replace: BooleanConstructor;
     to: PropType<vue_router.RouteLocationRaw>;
     exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     position: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
@@ -522,9 +518,10 @@ declare const VBtn: {
         default: string;
         validator: (v: any) => boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     active: {

package/lib/components/VBtnGroup/VBtnGroup.mjs

@@ -4,6 +4,7 @@ import "./VBtnGroup.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 { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
@@ -16,6 +17,7 @@ import { toRef } from 'vue';
 export const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
@@ -58,7 +60,8 @@ export const VBtnGroup = genericComponent()({
       return _createVNode(props.tag, {
         "class": ['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value]
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": props.style
       }, slots);
     });
   }

package/lib/components/VBtnGroup/VBtnGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnGroup.mjs","names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","genericComponent","propsFactory","useRender","toRef","makeVBtnGroupProps","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'v-btn-group')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAClD,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,kBAAkB,GAAGH,YAAY,CAAC;EAC7CI,OAAO,EAAEC,OAAO;EAEhB,GAAGnB,eAAe,EAAE;EACpB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,YAAY,EAAE;EACjB,GAAGC,cAAc,EAAE;EACnB,GAAGE,gBAAgB;AACrB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMS,SAAS,GAAGP,gBAAgB,EAAE,CAAC;EAC1CQ,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEL,kBAAkB,EAAE;EAE3BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGhB,YAAY,CAACY,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGxB,UAAU,CAACmB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG3B,SAAS,CAACqB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGxB,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGvB,UAAU,CAACe,KAAK,CAAC;IAE5CV,eAAe,CAAC;MACdmB,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdC,KAAK,EAAEjB,KAAK,CAACM,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAElB,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEpB,KAAK,CAACM,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFP,SAAS,CAAC,MAAM;MACd,OAAAsB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEhB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK;MACrB,GACSd,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBtnGroup.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","genericComponent","propsFactory","useRender","toRef","makeVBtnGroupProps","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.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 { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'v-btn-group')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAClD,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,kBAAkB,GAAGH,YAAY,CAAC;EAC7CI,OAAO,EAAEC,OAAO;EAEhB,GAAGpB,eAAe,EAAE;EACpB,GAAGE,kBAAkB,EAAE;EACvB,GAAGC,gBAAgB,EAAE;EACrB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,YAAY,EAAE;EACjB,GAAGC,cAAc,EAAE;EACnB,GAAGE,gBAAgB;AACrB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMS,SAAS,GAAGP,gBAAgB,EAAE,CAAC;EAC1CQ,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEL,kBAAkB,EAAE;EAE3BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGhB,YAAY,CAACY,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGxB,UAAU,CAACmB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG5B,SAAS,CAACsB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGxB,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGvB,UAAU,CAACe,KAAK,CAAC;IAE5CV,eAAe,CAAC;MACdmB,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdC,KAAK,EAAEjB,KAAK,CAACM,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAElB,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEpB,KAAK,CAACM,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFP,SAAS,CAAC,MAAM;MACd,OAAAsB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEhB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK,EACpBjB,KAAK,CAACkB,KAAK,CACZ;QAAA,SACOlB,KAAK,CAACmB;MAAK,GACThB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

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

@@ -12,12 +12,14 @@ declare const VBtnGroup: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
             divided: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -25,6 +27,7 @@ declare const VBtnGroup: {
         } & {
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -32,15 +35,12 @@ declare const VBtnGroup: {
             $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" | "rounded" | "density" | "variant" | "divided">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag" | "rounded" | "density" | "variant" | "divided">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -55,6 +55,7 @@ declare const VBtnGroup: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -62,6 +63,7 @@ declare const VBtnGroup: {
         } & {
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -69,15 +71,13 @@ declare const VBtnGroup: {
             $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;
         }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
             density: Density;
@@ -104,6 +104,7 @@ declare const VBtnGroup: {
         $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;
         density: Density;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -111,6 +112,7 @@ declare const VBtnGroup: {
     } & {
         border?: string | number | boolean | undefined;
         color?: string | undefined;
+        class?: any;
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
@@ -118,9 +120,6 @@ declare const VBtnGroup: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -131,6 +130,7 @@ declare const VBtnGroup: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
     density: Density;
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -138,6 +138,7 @@ declare const VBtnGroup: {
 } & {
     border?: string | number | boolean | undefined;
     color?: string | undefined;
+    class?: any;
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
@@ -145,15 +146,13 @@ declare const VBtnGroup: {
     $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;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
     rounded: string | number | boolean;
     density: Density;
@@ -184,6 +183,11 @@ declare const VBtnGroup: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }, vue.ExtractPropTypes<{
@@ -211,6 +215,11 @@ declare const VBtnGroup: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }>>;

package/lib/components/VBtnToggle/VBtnToggle.mjs

@@ -30,8 +30,10 @@ export const VBtnToggle = genericComponent()({
     useRender(() => {
       const [btnGroupProps] = VBtnGroup.filterProps(props);
       return _createVNode(VBtnGroup, _mergeProps({
-        "class": "v-btn-toggle"
-      }, btnGroupProps), {
+        "class": ['v-btn-toggle', props.class]
+      }, btnGroupProps, {
+        "style": props.style
+      }), {
         default: () => [slots.default?.({
           isSelected,
           next,

package/lib/components/VBtnToggle/VBtnToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnToggle.mjs","names":["makeVBtnGroupProps","VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","emits","value","setup","_ref","slots","isSelected","next","prev","select","selected","btnGroupProps","filterProps","_createVNode","_mergeProps","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\ntype VBtnToggleSlots = {\n  default: [DefaultBtnToggleSlot]\n}\n\nexport const VBtnToggle = genericComponent<VBtnToggleSlots>()({\n  name: 'VBtnToggle',\n\n  props: {\n    ...makeVBtnGroupProps(),\n    ...makeGroupProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => {\n      const [btnGroupProps] = VBtnGroup.filterProps(props)\n\n      return (\n        <VBtnGroup\n          class=\"v-btn-toggle\"\n          { ...btnGroupProps }\n        >\n          { slots.default?.({\n            isSelected,\n            next,\n            prev,\n            select,\n            selected,\n          } as DefaultBtnToggleSlot)}\n        </VBtnGroup>\n      )\n    })\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n\nexport type VBtnToggle = InstanceType<typeof VBtnToggle>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,SAAS,sCAEtC;AAAA,SACSC,cAAc,EAAEC,QAAQ,uCAEjC;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAOA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAM9F,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,EAAmB,CAAC;EAC5DM,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACL,GAAGX,kBAAkB,EAAE;IACvB,GAAGE,cAAc;EACnB,CAAC;EAEDU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,UAAU;MAAEC,IAAI;MAAEC,IAAI;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGlB,QAAQ,CAACQ,KAAK,EAAEL,gBAAgB,CAAC;IAEtFD,SAAS,CAAC,MAAM;MACd,MAAM,CAACiB,aAAa,CAAC,GAAGrB,SAAS,CAACsB,WAAW,CAACZ,KAAK,CAAC;MAEpD,OAAAa,YAAA,CAAAvB,SAAA,EAAAwB,WAAA;QAAA,SAEU;MAAc,GACfH,aAAa;QAAAI,OAAA,EAAAA,CAAA,MAEhBV,KAAK,CAACU,OAAO,GAAG;UAChBT,UAAU;UACVC,IAAI;UACJC,IAAI;UACJC,MAAM;UACNC;QACF,CAAC,CAAyB;MAAA;IAGhC,CAAC,CAAC;IAEF,OAAO;MACLH,IAAI;MACJC,IAAI;MACJC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBtnToggle.mjs","names":["makeVBtnGroupProps","VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","emits","value","setup","_ref","slots","isSelected","next","prev","select","selected","btnGroupProps","filterProps","_createVNode","_mergeProps","class","style","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\ntype VBtnToggleSlots = {\n  default: [DefaultBtnToggleSlot]\n}\n\nexport const VBtnToggle = genericComponent<VBtnToggleSlots>()({\n  name: 'VBtnToggle',\n\n  props: {\n    ...makeVBtnGroupProps(),\n    ...makeGroupProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => {\n      const [btnGroupProps] = VBtnGroup.filterProps(props)\n\n      return (\n        <VBtnGroup\n          class={[\n            'v-btn-toggle',\n            props.class,\n          ]}\n          { ...btnGroupProps }\n          style={ props.style }\n        >\n          { slots.default?.({\n            isSelected,\n            next,\n            prev,\n            select,\n            selected,\n          } as DefaultBtnToggleSlot)}\n        </VBtnGroup>\n      )\n    })\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n\nexport type VBtnToggle = InstanceType<typeof VBtnToggle>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,SAAS,sCAEtC;AAAA,SACSC,cAAc,EAAEC,QAAQ,uCAEjC;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAOA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAM9F,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,EAAmB,CAAC;EAC5DM,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACL,GAAGX,kBAAkB,EAAE;IACvB,GAAGE,cAAc;EACnB,CAAC;EAEDU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,UAAU;MAAEC,IAAI;MAAEC,IAAI;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGlB,QAAQ,CAACQ,KAAK,EAAEL,gBAAgB,CAAC;IAEtFD,SAAS,CAAC,MAAM;MACd,MAAM,CAACiB,aAAa,CAAC,GAAGrB,SAAS,CAACsB,WAAW,CAACZ,KAAK,CAAC;MAEpD,OAAAa,YAAA,CAAAvB,SAAA,EAAAwB,WAAA;QAAA,SAEW,CACL,cAAc,EACdd,KAAK,CAACe,KAAK;MACZ,GACIJ,aAAa;QAAA,SACVX,KAAK,CAACgB;MAAK;QAAAC,OAAA,EAAAA,CAAA,MAEjBZ,KAAK,CAACY,OAAO,GAAG;UAChBX,UAAU;UACVC,IAAI;UACJC,IAAI;UACJC,MAAM;UACNC;QACF,CAAC,CAAyB;MAAA;IAGhC,CAAC,CAAC;IAEF,OAAO;MACLH,IAAI;MACJC,IAAI;MACJC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}

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

@@ -38,6 +38,7 @@ declare const VBtnToggle: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -47,6 +48,7 @@ declare const VBtnToggle: {
             modelValue: any;
             divided: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -57,6 +59,7 @@ declare const VBtnToggle: {
             max?: number | undefined;
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             mandatory?: boolean | "force" | undefined;
             elevation?: string | number | undefined;
             theme?: string | undefined;
@@ -64,12 +67,9 @@ declare const VBtnToggle: {
             modelValue?: any;
             selectedClass?: string | undefined;
         } & {
-            $children?: vue.VNodeChild | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | {
+            $children?: vue.VNodeChild | {
                 default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-            };
-            $slots?: {
-                default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
+            } | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild);
             'v-slots'?: {
                 default?: false | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -77,7 +77,7 @@ declare const VBtnToggle: {
             "v-slot:default"?: false | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "disabled" | "multiple" | "tag" | "rounded" | "density" | "variant" | "modelValue" | "divided">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "disabled" | "multiple" | "tag" | "rounded" | "density" | "variant" | "modelValue" | "divided">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -92,6 +92,7 @@ declare const VBtnToggle: {
         $emit: (event: "update:modelValue", value: any) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -102,6 +103,7 @@ declare const VBtnToggle: {
             max?: number | undefined;
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             mandatory?: boolean | "force" | undefined;
             elevation?: string | number | undefined;
             theme?: string | undefined;
@@ -109,12 +111,9 @@ declare const VBtnToggle: {
             modelValue?: any;
             selectedClass?: string | undefined;
         } & {
-            $children?: vue.VNodeChild | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | {
-                default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-            };
-            $slots?: {
+            $children?: vue.VNodeChild | {
                 default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
+            } | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild);
             'v-slots'?: {
                 default?: false | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
             } | undefined;
@@ -129,6 +128,7 @@ declare const VBtnToggle: {
         }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             'update:modelValue': (value: any) => boolean;
         }, string, {
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean;
             tag: string;
@@ -158,6 +158,7 @@ declare const VBtnToggle: {
         $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;
@@ -168,6 +169,7 @@ declare const VBtnToggle: {
         max?: number | undefined;
         border?: string | number | boolean | undefined;
         color?: string | undefined;
+        class?: any;
         mandatory?: boolean | "force" | undefined;
         elevation?: string | number | undefined;
         theme?: string | undefined;
@@ -175,12 +177,9 @@ declare const VBtnToggle: {
         modelValue?: any;
         selectedClass?: string | undefined;
     } & {
-        $children?: vue.VNodeChild | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | {
-            default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-        };
-        $slots?: {
+        $children?: vue.VNodeChild | {
             default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-        } | undefined;
+        } | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild);
         'v-slots'?: {
             default?: false | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
         } | undefined;
@@ -197,6 +196,7 @@ declare const VBtnToggle: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
@@ -207,6 +207,7 @@ declare const VBtnToggle: {
     max?: number | undefined;
     border?: string | number | boolean | undefined;
     color?: string | undefined;
+    class?: any;
     mandatory?: boolean | "force" | undefined;
     elevation?: string | number | undefined;
     theme?: string | undefined;
@@ -214,12 +215,9 @@ declare const VBtnToggle: {
     modelValue?: any;
     selectedClass?: string | undefined;
 } & {
-    $children?: vue.VNodeChild | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | {
-        default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-    };
-    $slots?: {
+    $children?: vue.VNodeChild | {
         default?: ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
-    } | undefined;
+    } | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild);
     'v-slots'?: {
         default?: false | ((args_0: DefaultBtnToggleSlot) => vue.VNodeChild) | undefined;
     } | undefined;
@@ -234,6 +232,7 @@ declare const VBtnToggle: {
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (value: any) => boolean;
 }, string, {
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean;
     tag: string;
@@ -276,6 +275,11 @@ declare const VBtnToggle: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }, vue.ExtractPropTypes<{
@@ -312,6 +316,11 @@ declare const VBtnToggle: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }>>;