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

package/lib/components/VSwitch/VSwitch.mjs

@@ -70,7 +70,8 @@ export const VSwitch = genericComponent()({
           'v-switch--inset': props.inset
         }, {
           'v-switch--indeterminate': indeterminate.value
-        }, loaderClasses.value]
+        }, loaderClasses.value, props.class],
+        "style": props.style
       }, inputAttrs, inputProps, {
         "id": id.value,
         "focused": isFocused.value

package/lib/components/VSwitch/VSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["makeSelectionControlProps","VSelectionControl","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","control","onClick","e","stopPropagation","preventDefault","input","click","_createVNode","_mergeProps","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { MakeSlots } from '@/util'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & MakeSlots<{ loader: [LoaderSlotProps] }>\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick (e: Event) {\n        e.stopPropagation()\n        e.preventDefault()\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      )}\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["makeSelectionControlProps","VSelectionControl","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","update:modelValue","val","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","control","onClick","e","stopPropagation","preventDefault","input","click","_createVNode","_mergeProps","class","style","_ref2","messagesId","isDisabled","isReadonly","isValid","$event","undefined","_ref3","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & { loader: [LoaderSlotProps] }\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = VInput.filterProps(props)\n      const [controlProps, _2] = VSelectionControl.filterProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick (e: Event) {\n        e.stopPropagation()\n        e.preventDefault()\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      )}\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ declare const EventProp: <T extends any[] = any[]>() => PropType<EventProp<T, (.
 
 type Density = null | 'default' | 'comfortable' | 'compact';
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 type SelectionControlSlot = {
@@ -58,6 +58,7 @@ declare const VSwitch: {
             direction: "horizontal" | "vertical";
             inset: boolean;
             loading: string | boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
@@ -78,6 +79,7 @@ declare const VSwitch: {
             direction: "horizontal" | "vertical";
             inset: boolean;
             loading: string | boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
@@ -98,13 +100,14 @@ declare const VSwitch: {
             color?: string | undefined;
             value?: any;
             label?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             modelValue?: any;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -114,8 +117,8 @@ declare const VSwitch: {
             trueValue?: any;
             falseValue?: any;
         } & {
-            $children?: {} | vue.VNodeChild | {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -126,20 +129,8 @@ declare const VSwitch: {
                 input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
                 loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                label?: ((args_0: {
-                    label: string | undefined;
-                    props: Record<string, unknown>;
-                }) => vue.VNodeChild) | undefined;
-                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-                loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
-                default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+                default?: false | ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -151,7 +142,7 @@ declare const VSwitch: {
                 loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -165,7 +156,7 @@ declare const VSwitch: {
             "onUpdate:modelValue"?: (() => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
             "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "flat" | "inline" | "error" | "direction" | "inset" | "loading" | "disabled" | "multiple" | "readonly" | "indeterminate" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "valueComparator">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "flat" | "inline" | "error" | "direction" | "inset" | "loading" | "style" | "disabled" | "multiple" | "readonly" | "indeterminate" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "valueComparator">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -186,6 +177,7 @@ declare const VSwitch: {
             direction: "horizontal" | "vertical";
             inset: boolean;
             loading: string | boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
@@ -206,13 +198,14 @@ declare const VSwitch: {
             color?: string | undefined;
             value?: any;
             label?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             modelValue?: any;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -222,8 +215,8 @@ declare const VSwitch: {
             trueValue?: any;
             falseValue?: any;
         } & {
-            $children?: {} | vue.VNodeChild | {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -234,20 +227,8 @@ declare const VSwitch: {
                 input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
                 loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                label?: ((args_0: {
-                    label: string | undefined;
-                    props: Record<string, unknown>;
-                }) => vue.VNodeChild) | undefined;
-                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-                loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
-                default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+                default?: false | ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -259,7 +240,7 @@ declare const VSwitch: {
                 loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -284,6 +265,7 @@ declare const VSwitch: {
             direction: "horizontal" | "vertical";
             inset: boolean;
             loading: string | boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             multiple: boolean | null;
             readonly: boolean;
@@ -324,6 +306,7 @@ declare const VSwitch: {
         direction: "horizontal" | "vertical";
         inset: boolean;
         loading: string | boolean;
+        style: vue.StyleValue;
         disabled: boolean;
         multiple: boolean | null;
         readonly: boolean;
@@ -344,13 +327,14 @@ declare const VSwitch: {
         color?: string | undefined;
         value?: any;
         label?: string | undefined;
+        class?: any;
         theme?: string | undefined;
         modelValue?: any;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
         'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
         'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-        'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+        'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
         validateOn?: "input" | "blur" | "submit" | undefined;
         validationValue?: any;
         hint?: string | undefined;
@@ -360,8 +344,8 @@ declare const VSwitch: {
         trueValue?: any;
         falseValue?: any;
     } & {
-        $children?: {} | vue.VNodeChild | {
-            default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+            default?: ((...args: never) => vue.VNodeChild) | undefined;
             prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -372,20 +356,8 @@ declare const VSwitch: {
             input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
             loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-            prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            label?: ((args_0: {
-                label: string | undefined;
-                props: Record<string, unknown>;
-            }) => vue.VNodeChild) | undefined;
-            input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
-            default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            default?: false | ((...args: never) => vue.VNodeChild) | undefined;
             prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -397,7 +369,7 @@ declare const VSwitch: {
             loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
         "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -422,6 +394,7 @@ declare const VSwitch: {
     direction: "horizontal" | "vertical";
     inset: boolean;
     loading: string | boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean | null;
     readonly: boolean;
@@ -442,13 +415,14 @@ declare const VSwitch: {
     color?: string | undefined;
     value?: any;
     label?: string | undefined;
+    class?: any;
     theme?: string | undefined;
     modelValue?: any;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
     'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
     'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-    'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+    'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
     validateOn?: "input" | "blur" | "submit" | undefined;
     validationValue?: any;
     hint?: string | undefined;
@@ -458,8 +432,8 @@ declare const VSwitch: {
     trueValue?: any;
     falseValue?: any;
 } & {
-    $children?: {} | vue.VNodeChild | {
-        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+        default?: ((...args: never) => vue.VNodeChild) | undefined;
         prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -470,20 +444,8 @@ declare const VSwitch: {
         input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
         loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        label?: ((args_0: {
-            label: string | undefined;
-            props: Record<string, unknown>;
-        }) => vue.VNodeChild) | undefined;
-        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-        loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
-        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        default?: false | ((...args: never) => vue.VNodeChild) | undefined;
         prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -495,7 +457,7 @@ declare const VSwitch: {
         loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
     "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -520,6 +482,7 @@ declare const VSwitch: {
     direction: "horizontal" | "vertical";
     inset: boolean;
     loading: string | boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     multiple: boolean | null;
     readonly: boolean;
@@ -563,12 +526,17 @@ declare const VSwitch: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     label: StringConstructor;
     trueValue: null;
     falseValue: null;
     value: null;
     focused: BooleanConstructor;
-    'onUpdate:focused': vue.PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: vue.PropType<string | string[]>;
         default: () => never[];
@@ -636,12 +604,17 @@ declare const VSwitch: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     label: StringConstructor;
     trueValue: null;
     falseValue: null;
     value: null;
     focused: BooleanConstructor;
-    'onUpdate:focused': vue.PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: vue.PropType<string | string[]>;
         default: () => never[];

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 import "./VSystemBar.css";
 
 // Composables
+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";
@@ -18,6 +19,7 @@ export const VSystemBar = genericComponent()({
     color: String,
     height: [Number, String],
     window: Boolean,
+    ...makeComponentProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
     ...makeRoundedProps(),
@@ -59,8 +61,8 @@ export const VSystemBar = genericComponent()({
     useRender(() => _createVNode(props.tag, {
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
-      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
+      }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value, props.style]
     }, slots));
     return {};
   }

package/lib/components/VSystemBar/VSystemBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useSsrBoot","computed","ref","toRef","genericComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","_createVNode","tag","value"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VSystemBar = genericComponent()({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n          ssrBootStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB;AAAA,SAClBC,UAAU,yCAEnB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,UAAU,GAAGF,gBAAgB,EAAE,CAAC;EAC3CG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGxB,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDkB,KAAKA,CAAEP,KAAK,EAAAQ,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGpB,YAAY,CAACU,KAAK,CAAC;IAC5C,MAAM;MAAEW,sBAAsB;MAAEC;IAAsB,CAAC,GAAGrB,kBAAkB,CAACI,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEa;IAAiB,CAAC,GAAG9B,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEc;IAAe,CAAC,GAAG3B,UAAU,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEe;IAAc,CAAC,GAAGvB,UAAU,EAAE;IACtC,MAAMW,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAEW;IAAiB,CAAC,GAAG/B,aAAa,CAAC;MACzCgC,EAAE,EAAEjB,KAAK,CAACD,IAAI;MACdmB,KAAK,EAAEzB,QAAQ,CAAC,MAAM0B,QAAQ,CAACnB,KAAK,CAACkB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAE1B,GAAG,CAAC,KAAK,CAAC;MACpB2B,UAAU,EAAElB,MAAM;MAClBmB,WAAW,EAAEnB,MAAM;MACnBoB,MAAM,EAAE9B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B+B,QAAQ,EAAE7B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC,MAAA4B,YAAA,CAAAzB,KAAA,CAAA0B,GAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAE1B,KAAK,CAACK;MAAO,CAAC,EACxCK,YAAY,CAACiB,KAAK,EAClBhB,sBAAsB,CAACgB,KAAK,EAC5Bd,gBAAgB,CAACc,KAAK,EACtBb,cAAc,CAACa,KAAK,CACrB;MAAA,SACM,CACLf,qBAAqB,CAACe,KAAK,EAC3BX,gBAAgB,CAACW,KAAK,EACtBZ,aAAa,CAACY,KAAK;IACpB,GACSlB,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VSystemBar.mjs","names":["makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useSsrBoot","computed","ref","toRef","genericComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VSystemBar = genericComponent()({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeComponentProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n          ssrBootStyles.value,\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB;AAAA,SAClBC,UAAU,yCAEnB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,UAAU,GAAGF,gBAAgB,EAAE,CAAC;EAC3CG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGzB,kBAAkB,EAAE;IACvB,GAAGC,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDkB,KAAKA,CAAEP,KAAK,EAAAQ,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGpB,YAAY,CAACU,KAAK,CAAC;IAC5C,MAAM;MAAEW,sBAAsB;MAAEC;IAAsB,CAAC,GAAGrB,kBAAkB,CAACI,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEa;IAAiB,CAAC,GAAG9B,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEc;IAAe,CAAC,GAAG3B,UAAU,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEe;IAAc,CAAC,GAAGvB,UAAU,EAAE;IACtC,MAAMW,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAEW;IAAiB,CAAC,GAAG/B,aAAa,CAAC;MACzCgC,EAAE,EAAEjB,KAAK,CAACD,IAAI;MACdmB,KAAK,EAAEzB,QAAQ,CAAC,MAAM0B,QAAQ,CAACnB,KAAK,CAACkB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAE1B,GAAG,CAAC,KAAK,CAAC;MACpB2B,UAAU,EAAElB,MAAM;MAClBmB,WAAW,EAAEnB,MAAM;MACnBoB,MAAM,EAAE9B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B+B,QAAQ,EAAE7B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC,MAAA4B,YAAA,CAAAzB,KAAA,CAAA0B,GAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAE1B,KAAK,CAACK;MAAO,CAAC,EACxCK,YAAY,CAACiB,KAAK,EAClBhB,sBAAsB,CAACgB,KAAK,EAC5Bd,gBAAgB,CAACc,KAAK,EACtBb,cAAc,CAACa,KAAK,EACpB3B,KAAK,CAAC4B,KAAK,CACZ;MAAA,SACM,CACLhB,qBAAqB,CAACe,KAAK,EAC3BX,gBAAgB,CAACW,KAAK,EACtBZ,aAAa,CAACY,KAAK,EACnB3B,KAAK,CAAC6B,KAAK;IACZ,GACSpB,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -13,17 +13,20 @@ declare const VSystemBar: {
             window: boolean;
             absolute: boolean;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
         }> & Omit<{
             window: boolean;
             absolute: boolean;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
         } & {
             height?: string | number | undefined;
             name?: string | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -31,15 +34,12 @@ declare const VSystemBar: {
             $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, "window" | "absolute" | "order" | "tag" | "rounded">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "window" | "absolute" | "order" | "style" | "tag" | "rounded">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -57,11 +57,13 @@ declare const VSystemBar: {
             window: boolean;
             absolute: boolean;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
         } & {
             height?: string | number | undefined;
             name?: string | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -69,9 +71,6 @@ declare const VSystemBar: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
@@ -81,6 +80,7 @@ declare const VSystemBar: {
             window: boolean;
             absolute: boolean;
             order: string | number;
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
         }, {}, string> & {
@@ -107,11 +107,13 @@ declare const VSystemBar: {
         window: boolean;
         absolute: boolean;
         order: string | number;
+        style: vue.StyleValue;
         tag: string;
     } & {
         height?: string | number | undefined;
         name?: string | undefined;
         color?: string | undefined;
+        class?: any;
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
@@ -119,9 +121,6 @@ declare const VSystemBar: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -135,11 +134,13 @@ declare const VSystemBar: {
     window: boolean;
     absolute: boolean;
     order: string | number;
+    style: vue.StyleValue;
     tag: string;
 } & {
     height?: string | number | undefined;
     name?: string | undefined;
     color?: string | undefined;
+    class?: any;
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
@@ -147,9 +148,6 @@ declare const VSystemBar: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
@@ -159,6 +157,7 @@ declare const VSystemBar: {
     window: boolean;
     absolute: boolean;
     order: string | number;
+    style: vue.StyleValue;
     tag: string;
     rounded: string | number | boolean;
 }, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
@@ -183,6 +182,11 @@ declare const VSystemBar: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     height: (StringConstructor | NumberConstructor)[];
     window: BooleanConstructor;
@@ -208,6 +212,11 @@ declare const VSystemBar: {
         type: (StringConstructor | NumberConstructor)[];
         validator(v: any): boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     height: (StringConstructor | NumberConstructor)[];
     window: BooleanConstructor;

package/lib/components/VTable/VTable.mjs

@@ -3,6 +3,7 @@ import { createVNode as _createVNode } from "vue";
 import "./VTable.css";
 
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
@@ -14,6 +15,7 @@ export const VTable = genericComponent()({
     fixedFooter: Boolean,
     height: [Number, String],
     hover: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -36,7 +38,8 @@ export const VTable = genericComponent()({
         'v-table--has-top': !!slots.top,
         'v-table--has-bottom': !!slots.bottom,
         'v-table--hover': props.hover
-      }, themeClasses.value, densityClasses.value]
+      }, themeClasses.value, densityClasses.value, props.class],
+      "style": props.style
     }, {
       default: () => [slots.top?.(), slots.default ? _createVNode("div", {
         "class": "v-table__wrapper",