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

package/lib/components/VSwitch/VSwitch.css

@@ -59,9 +59,6 @@
 .v-switch .v-selection-control {
   min-height: var(--v-input-control-height);
 }
-.v-switch .v-selection-control__wrapper {
-  width: auto;
-}
 .v-switch .v-selection-control__input {
   border-radius: 50%;
   transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
@@ -77,4 +74,7 @@
 .v-switch.v-switch--indeterminate .v-switch__thumb {
   transform: scale(0.75);
   box-shadow: none;
+}
+.v-switch.v-switch--inset .v-selection-control__wrapper {
+  width: auto;
 }

package/lib/components/VSwitch/VSwitch.mjs

@@ -10,21 +10,22 @@ import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
 import { useFocus } from "../../composables/focus.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 import { computed, ref } from 'vue';
-import { filterInputAttrs, genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
+import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVSwitchProps = propsFactory({
+  indeterminate: Boolean,
+  inset: Boolean,
+  flat: Boolean,
+  loading: {
+    type: [Boolean, String],
+    default: false
+  },
+  ...makeVInputProps(),
+  ...makeSelectionControlProps()
+}, 'v-switch');
 export const VSwitch = genericComponent()({
   name: 'VSwitch',
   inheritAttrs: false,
-  props: {
-    indeterminate: Boolean,
-    inset: Boolean,
-    flat: Boolean,
-    loading: {
-      type: [Boolean, String],
-      default: false
-    },
-    ...makeVInputProps(),
-    ...makeSelectionControlProps()
-  },
+  props: makeVSwitchProps(),
   emits: {
     'update:focused': focused => true,
     'update:modelValue': () => true,

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","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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"}
+{"version":3,"file":"VSwitch.mjs","names":["makeSelectionControlProps","VSelectionControl","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","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, propsFactory, 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 makeVSwitchProps = propsFactory({\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}, 'v-switch')\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\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/VSwitch.sass

@@ -62,9 +62,6 @@
   .v-selection-control
     min-height: var(--v-input-control-height)
 
-  .v-selection-control__wrapper
-    width: auto
-
   .v-selection-control__input
     border-radius: 50%
     transition: $switch-control-input-transition
@@ -81,3 +78,7 @@
     .v-switch__thumb
       transform: scale(.75)
       box-shadow: none
+
+  &.v-switch--inset
+    .v-selection-control__wrapper
+      width: auto

package/lib/components/VSwitch/index.d.mts

@@ -25,6 +25,10 @@ type SelectionControlSlot = {
     };
 };
 
+type VMessageSlot = {
+    message: string;
+};
+
 type ValidationResult = string | boolean;
 type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
@@ -51,77 +55,41 @@ declare const VSwitch: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            flat: boolean;
-            inline: boolean;
-            error: boolean;
-            direction: "horizontal" | "vertical";
-            inset: boolean;
-            loading: string | boolean;
-            style: vue.StyleValue;
-            disabled: boolean;
-            multiple: boolean | null;
-            readonly: boolean;
-            indeterminate: boolean;
-            messages: string | string[];
-            density: Density;
-            ripple: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-            persistentHint: boolean;
-            valueComparator: typeof deepEqual;
-        }> & Omit<{
-            flat: boolean;
-            inline: boolean;
-            error: boolean;
-            direction: "horizontal" | "vertical";
-            inset: boolean;
-            loading: string | boolean;
-            style: vue.StyleValue;
-            disabled: boolean;
-            multiple: boolean | null;
-            readonly: boolean;
-            indeterminate: boolean;
-            messages: string | string[];
-            density: Density;
-            ripple: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-            persistentHint: boolean;
-            valueComparator: typeof deepEqual;
-        } & {
+        $props: {
+            flat?: boolean | undefined;
+            inline?: boolean | undefined;
+            error?: boolean | undefined;
+            direction?: "horizontal" | "vertical" | undefined;
+            inset?: boolean | undefined;
+            loading?: string | boolean | undefined;
+            style?: vue.StyleValue | undefined;
+            disabled?: boolean | undefined;
+            multiple?: boolean | null | undefined;
+            readonly?: boolean | undefined;
+            indeterminate?: boolean | undefined;
+            messages?: string | string[] | undefined;
+            density?: Density | undefined;
+            ripple?: boolean | undefined;
+            focused?: boolean | undefined;
+            errorMessages?: string | string[] | undefined;
+            maxErrors?: string | number | undefined;
+            rules?: ValidationRule[] | undefined;
+            persistentHint?: boolean | undefined;
+            valueComparator?: typeof deepEqual | undefined;
             type?: string | undefined;
+            key?: string | number | symbol | undefined;
             id?: string | undefined;
             name?: string | undefined;
             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<[boolean], (args_0: boolean) => any> | undefined;
-            validateOn?: "input" | "blur" | "submit" | undefined;
-            validationValue?: any;
-            hint?: string | undefined;
-            hideDetails?: boolean | "auto" | undefined;
-            falseIcon?: IconValue | undefined;
-            trueIcon?: IconValue | undefined;
-            trueValue?: any;
-            falseValue?: any;
-        } & {
             $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;
+                message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
                 label?: ((args_0: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -129,11 +97,17 @@ declare const VSwitch: {
                 input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
                 loader?: ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             };
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            theme?: string | undefined;
+            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
             'v-slots'?: {
                 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;
+                message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
                 label?: false | ((args_0: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -141,22 +115,72 @@ declare const VSwitch: {
                 input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
                 loader?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
-            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
-            "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
             "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            modelValue?: any;
+            "onUpdate:modelValue"?: (() => any) | undefined;
+            prependIcon?: IconValue | undefined;
+            appendIcon?: IconValue | undefined;
+            "v-slot:loader"?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
+            'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
+            'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
+            'onUpdate:focused'?: (EventProp<[boolean], (args_0: boolean) => any> & ((focused: boolean) => any)) | undefined;
             "v-slot:label"?: false | ((args_0: {
                 label: string | undefined;
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
+            "v-slot:message"?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
+            validateOn?: "input" | "blur" | "submit" | undefined;
+            validationValue?: any;
+            hint?: string | undefined;
+            hideDetails?: boolean | "auto" | undefined;
+            "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            defaultsTarget?: string | undefined;
+            falseIcon?: IconValue | undefined;
+            trueIcon?: IconValue | undefined;
+            trueValue?: any;
+            falseValue?: any;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            "v-slot:loader"?: false | ((args_0: LoaderSlotProps) => vue.VNodeChild) | undefined;
-        } & {
-            "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" | "style" | "disabled" | "multiple" | "readonly" | "indeterminate" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "valueComparator">;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -164,10 +188,36 @@ declare const VSwitch: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: ((...args: never) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            prepend?: ((args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            append?: ((args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            details?: ((args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            message?: ((args_0: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            label?: ((args_0: {
+                label: string | undefined;
+                props: Record<string, unknown>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            input?: ((args_0: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            loader?: ((args_0: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
         }>;
-        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: ((event: "update:modelValue") => void) & ((event: "update:focused", focused: boolean) => void) & ((event: "update:indeterminate", val: boolean) => void);
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -210,6 +260,7 @@ declare const VSwitch: {
             validationValue?: any;
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
+            defaultsTarget?: string | undefined;
             falseIcon?: IconValue | undefined;
             trueIcon?: IconValue | undefined;
             trueValue?: any;
@@ -220,6 +271,7 @@ declare const VSwitch: {
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
                 label?: ((args_0: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -232,6 +284,7 @@ declare const VSwitch: {
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
                 label?: false | ((args_0: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -244,6 +297,7 @@ declare const VSwitch: {
             "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;
+            "v-slot:message"?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             "v-slot:label"?: false | ((args_0: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -279,7 +333,35 @@ declare const VSwitch: {
             rules: ValidationRule[];
             persistentHint: boolean;
             valueComparator: typeof deepEqual;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: (...args: never) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            prepend: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            append: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            details: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            message: (args_0: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            label: (args_0: {
+                label: string | undefined;
+                props: Record<string, unknown>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            input: (args_0: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            loader: (args_0: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -294,7 +376,7 @@ declare const VSwitch: {
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof vue.nextTick;
@@ -339,6 +421,7 @@ declare const VSwitch: {
         validationValue?: any;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
+        defaultsTarget?: string | undefined;
         falseIcon?: IconValue | undefined;
         trueIcon?: IconValue | undefined;
         trueValue?: any;
@@ -349,6 +432,7 @@ declare const VSwitch: {
             prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             label?: ((args_0: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -361,6 +445,7 @@ declare const VSwitch: {
             prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             label?: false | ((args_0: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -373,6 +458,7 @@ declare const VSwitch: {
         "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;
+        "v-slot:message"?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         "v-slot:label"?: false | ((args_0: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -427,6 +513,7 @@ declare const VSwitch: {
     validationValue?: any;
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
+    defaultsTarget?: string | undefined;
     falseIcon?: IconValue | undefined;
     trueIcon?: IconValue | undefined;
     trueValue?: any;
@@ -437,6 +524,7 @@ declare const VSwitch: {
         prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         label?: ((args_0: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -449,6 +537,7 @@ declare const VSwitch: {
         prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        message?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         label?: false | ((args_0: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -461,6 +550,7 @@ declare const VSwitch: {
     "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;
+    "v-slot:message"?: false | ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
     "v-slot:label"?: false | ((args_0: {
         label: string | undefined;
         props: Record<string, unknown>;
@@ -496,15 +586,49 @@ declare const VSwitch: {
     rules: ValidationRule[];
     persistentHint: boolean;
     valueComparator: typeof deepEqual;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    default: (...args: never) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    prepend: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    append: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    details: (args_0: VInputSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    message: (args_0: VMessageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    label: (args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    input: (args_0: SelectionControlSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    loader: (args_0: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    theme: StringConstructor;
     density: {
         type: vue.PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    theme: StringConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     disabled: BooleanConstructor;
+    defaultsTarget: StringConstructor;
     error: BooleanConstructor;
     id: StringConstructor;
     inline: BooleanConstructor;
@@ -526,11 +650,6 @@ 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;
@@ -575,14 +694,20 @@ declare const VSwitch: {
         default: boolean;
     };
 }, vue.ExtractPropTypes<{
+    theme: StringConstructor;
     density: {
         type: vue.PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
-    theme: StringConstructor;
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     color: StringConstructor;
     disabled: BooleanConstructor;
+    defaultsTarget: StringConstructor;
     error: BooleanConstructor;
     id: StringConstructor;
     inline: BooleanConstructor;
@@ -604,11 +729,6 @@ 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;

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -11,21 +11,22 @@ import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
-import { computed, ref, toRef } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs";
+import { computed, shallowRef, toRef } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
+export const makeVSystemBarProps = propsFactory({
+  color: String,
+  height: [Number, String],
+  window: Boolean,
+  ...makeComponentProps(),
+  ...makeElevationProps(),
+  ...makeLayoutItemProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps()
+}, 'v-system-bar');
 export const VSystemBar = genericComponent()({
   name: 'VSystemBar',
-  props: {
-    color: String,
-    height: [Number, String],
-    window: Boolean,
-    ...makeComponentProps(),
-    ...makeElevationProps(),
-    ...makeLayoutItemProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps(),
-    ...makeThemeProps()
-  },
+  props: makeVSystemBarProps(),
   setup(props, _ref) {
     let {
       slots
@@ -52,7 +53,7 @@ export const VSystemBar = genericComponent()({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: ref('top'),
+      position: shallowRef('top'),
       layoutSize: height,
       elementSize: height,
       active: computed(() => true),