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

package/lib/components/VSelectionControl/VSelectionControl.mjs

@@ -11,7 +11,7 @@ import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
 import { useDensity } from "../../composables/density.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
-import { computed, inject, nextTick, ref } from 'vue';
+import { computed, inject, nextTick, ref, shallowRef } from 'vue';
 import { filterInputAttrs, genericComponent, getUid, propsFactory, SUPPORTS_FOCUS_VISIBLE, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 export const makeSelectionControlProps = propsFactory({
   label: String,
@@ -93,8 +93,8 @@ export const VSelectionControl = genericComponent()({
     } = useSelectionControl(props);
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
-    const isFocused = ref(false);
-    const isFocusVisible = ref(false);
+    const isFocused = shallowRef(false);
+    const isFocusVisible = shallowRef(false);
     const input = ref();
     group?.onForceUpdate(() => {
       if (input.value) {

package/lib/components/VSelectionControl/VSelectionControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeComponentProps","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","Ripple","useDensity","useProxiedModel","useTextColor","computed","inject","nextTick","ref","filterInputAttrs","genericComponent","getUid","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","label","String","trueValue","falseValue","value","useSelectionControl","props","group","undefined","densityClasses","modelValue","isMultiple","multiple","Array","isArray","model","get","val","some","v","valueComparator","set","readonly","currentValue","newVal","filter","item","textColorClasses","textColorStyles","error","disabled","color","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","id","isFocused","isFocusVisible","input","onForceUpdate","checked","onFocus","e","target","matches","onBlur","onInput","forceUpdate","for","rootAttrs","inputAttrs","_createVNode","_mergeProps","inline","class","style","default","_withDirectives","type","_resolveDirective","ripple"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject, nextTick, ref } from 'vue'\nimport {\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { CSSProperties, ExtractPropTypes, Ref, WritableComputedRef } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport type VSelectionControlSlots = {\n  default: []\n  label: [{ label: string | undefined, props: Record<string, unknown> }]\n  input: [SelectionControlSlot]\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  label: String,\n  trueValue: null,\n  falseValue: null,\n  value: null,\n\n  ...makeComponentProps(),\n  ...makeSelectionControlGroupProps(),\n}, 'v-selection-control')\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(props: {\n  modelValue?: T\n  'onUpdate:modelValue'?: (val: T) => any\n}) => GenericProps<typeof props, VSelectionControlSlots>>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onInput (e: Event) {\n      if (props.readonly && group) {\n        nextTick(() => group.forceUpdate())\n      }\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': props.inline,\n            },\n            densityClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          style={ props.style }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n              <input\n                ref={ input }\n                checked={ model.value }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                onInput={ onInput }\n                aria-disabled={ props.readonly }\n                type={ props.type }\n                value={ trueValue.value }\n                name={ props.name }\n                aria-checked={ props.type === 'checkbox' ? model.value : undefined }\n                { ...inputAttrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } as SelectionControlSlot)}\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable>\n              { label }\n            </VLabel>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n"],"mappings":"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"}
+{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","makeComponentProps","makeSelectionControlGroupProps","VSelectionControlGroupSymbol","Ripple","useDensity","useProxiedModel","useTextColor","computed","inject","nextTick","ref","shallowRef","filterInputAttrs","genericComponent","getUid","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","label","String","trueValue","falseValue","value","useSelectionControl","props","group","undefined","densityClasses","modelValue","isMultiple","multiple","Array","isArray","model","get","val","some","v","valueComparator","set","readonly","currentValue","newVal","filter","item","textColorClasses","textColorStyles","error","disabled","color","icon","trueIcon","falseIcon","VSelectionControl","name","directives","inheritAttrs","emits","setup","_ref","attrs","slots","uid","id","isFocused","isFocusVisible","input","onForceUpdate","checked","onFocus","e","target","matches","onBlur","onInput","forceUpdate","for","rootAttrs","inputAttrs","_createVNode","_mergeProps","inline","class","style","default","_withDirectives","type","_resolveDirective","ripple"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject, nextTick, ref, shallowRef } from 'vue'\nimport {\n  filterInputAttrs,\n  genericComponent,\n  getUid,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { CSSProperties, ExtractPropTypes, Ref, WritableComputedRef } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  textColorClasses: Ref<string[]>\n  textColorStyles: Ref<CSSProperties>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport type VSelectionControlSlots = {\n  default: []\n  label: [{ label: string | undefined, props: Record<string, unknown> }]\n  input: [SelectionControlSlot]\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  label: String,\n  trueValue: null,\n  falseValue: null,\n  value: null,\n\n  ...makeComponentProps(),\n  ...makeSelectionControlGroupProps(),\n}, 'v-selection-control')\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>(\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  },\n  slots: VSelectionControlSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      group,\n      densityClasses,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = shallowRef(false)\n    const isFocusVisible = shallowRef(false)\n    const input = ref<HTMLInputElement>()\n\n    group?.onForceUpdate(() => {\n      if (input.value) {\n        input.value.checked = model.value\n      }\n    })\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    function onInput (e: Event) {\n      if (props.readonly && group) {\n        nextTick(() => group.forceUpdate())\n      }\n      model.value = (e.target as HTMLInputElement).checked\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': props.inline,\n            },\n            densityClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          style={ props.style }\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon key=\"icon\" icon={ icon.value } /> }\n\n              <input\n                ref={ input }\n                checked={ model.value }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                onInput={ onInput }\n                aria-disabled={ props.readonly }\n                type={ props.type }\n                value={ trueValue.value }\n                name={ props.name }\n                aria-checked={ props.type === 'checkbox' ? model.value : undefined }\n                { ...inputAttrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                textColorStyles,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              } as SelectionControlSlot)}\n            </div>\n          </div>\n\n          { label && (\n            <VLabel for={ id.value } clickable>\n              { label }\n            </VLabel>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, JSXComponent, PropType, Ref, nextTick, WritableComputedRef, CSSProperties } from 'vue';
 
-type SlotsToProps<U extends Record<string, any[]> | Record<string, Slot>, T = U extends Record<string, any[]> ? MakeSlots<U> : U> = {
+type SlotsToProps<U extends RawSlots, T = U extends Record<string, any[]> ? MakeSlots<U> : U> = {
     $children?: (VNodeChild | (T extends {
         default: infer V;
     } ? V : {}) | {
@@ -13,8 +13,9 @@ type SlotsToProps<U extends Record<string, any[]> | Record<string, Slot>, T = U
 } & {
     [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;
 };
+type RawSlots = Record<string, any[]> | Record<string, Slot>;
 type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
-type MakeSlots<T extends Record<string, any[]> | Record<string, Slot>> = {
+type MakeSlots<T extends RawSlots> = {
     [K in keyof T]: T[K] extends any[] ? Slot<T[K]> : T[K];
 };
 type GenericProps<Props, Slots extends Record<string, any[]>> = {
@@ -54,56 +55,73 @@ declare const VSelectionControl: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            inline: boolean;
-            error: boolean;
-            style: vue.StyleValue;
-            disabled: boolean;
-            multiple: boolean | null;
-            readonly: boolean;
-            density: Density;
-            ripple: boolean;
-            valueComparator: typeof deepEqual;
-        }> & Omit<Readonly<ExtractPropTypes<Omit<{
-            density: {
-                type: vue.PropType<Density>;
-                default: string;
-                validator: (v: any) => boolean;
-            };
-            theme: StringConstructor;
-            color: StringConstructor;
-            disabled: BooleanConstructor;
-            error: BooleanConstructor;
-            id: StringConstructor;
-            inline: BooleanConstructor;
-            falseIcon: vue.PropType<IconValue>;
-            trueIcon: vue.PropType<IconValue>;
-            ripple: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            multiple: {
-                type: vue.PropType<boolean | null>;
-                default: null;
-            };
-            name: StringConstructor;
-            readonly: BooleanConstructor;
-            modelValue: null;
-            type: StringConstructor;
-            valueComparator: {
-                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;
-        }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "onUpdate:modelValue" | "v-slot:label" | "v-slot:input">>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "inline" | "error" | "style" | "disabled" | "multiple" | "readonly" | "density" | "ripple" | "valueComparator">;
+        $props: {
+            inline?: boolean | undefined;
+            error?: boolean | undefined;
+            style?: vue.StyleValue | undefined;
+            disabled?: boolean | undefined;
+            multiple?: boolean | null | undefined;
+            readonly?: boolean | undefined;
+            density?: Density | undefined;
+            ripple?: 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;
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            theme?: string | 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;
+            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+            defaultsTarget?: string | undefined;
+            falseIcon?: IconValue | undefined;
+            trueIcon?: IconValue | undefined;
+            trueValue?: any;
+            falseValue?: any;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -111,53 +129,51 @@ declare const VSelectionControl: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: (() => 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;
         }>;
-        $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: string, ...args: any[]) => void;
         $el: any;
-        $options: vue.ComponentOptionsBase<Readonly<ExtractPropTypes<Omit<{
-            density: {
-                type: vue.PropType<Density>;
-                default: string;
-                validator: (v: any) => boolean;
-            };
-            theme: StringConstructor;
-            color: StringConstructor;
-            disabled: BooleanConstructor;
-            error: BooleanConstructor;
-            id: StringConstructor;
-            inline: BooleanConstructor;
-            falseIcon: vue.PropType<IconValue>;
-            trueIcon: vue.PropType<IconValue>;
-            ripple: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            multiple: {
-                type: vue.PropType<boolean | null>;
-                default: null;
-            };
-            name: StringConstructor;
-            readonly: BooleanConstructor;
-            modelValue: null;
-            type: StringConstructor;
-            valueComparator: {
-                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;
-        }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "onUpdate:modelValue" | "v-slot:label" | "v-slot:input">>>, {
-            isFocused: Ref<boolean>;
+        $options: vue.ComponentOptionsBase<{
+            inline: boolean;
+            error: boolean;
+            style: vue.StyleValue;
+            disabled: boolean;
+            multiple: boolean | null;
+            readonly: boolean;
+            density: Density;
+            ripple: boolean;
+            valueComparator: typeof deepEqual;
+        } & {
+            type?: string | undefined;
+            id?: string | undefined;
+            name?: string | undefined;
+            color?: string | undefined;
+            value?: any;
+            label?: string | undefined;
+            class?: any;
+            theme?: string | undefined;
+            defaultsTarget?: string | undefined;
+            falseIcon?: IconValue | undefined;
+            trueIcon?: IconValue | undefined;
+            trueValue?: any;
+            falseValue?: any;
+        } & {
+            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+        }, {
+            isFocused: vue.ShallowRef<boolean>;
             input: Ref<HTMLInputElement | undefined>;
         }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
             'update:modelValue': (val: any) => boolean;
@@ -171,7 +187,20 @@ declare const VSelectionControl: {
             density: Density;
             ripple: boolean;
             valueComparator: typeof deepEqual;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: () => 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;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -186,98 +215,72 @@ declare const VSelectionControl: {
             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 nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
-    } & Readonly<ExtractPropTypes<Omit<{
-        density: {
-            type: vue.PropType<Density>;
-            default: string;
-            validator: (v: any) => boolean;
-        };
-        theme: StringConstructor;
-        color: StringConstructor;
-        disabled: BooleanConstructor;
-        error: BooleanConstructor;
-        id: StringConstructor;
-        inline: BooleanConstructor;
-        falseIcon: vue.PropType<IconValue>;
-        trueIcon: vue.PropType<IconValue>;
-        ripple: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        multiple: {
-            type: vue.PropType<boolean | null>;
-            default: null;
-        };
-        name: StringConstructor;
-        readonly: BooleanConstructor;
-        modelValue: null;
-        type: StringConstructor;
-        valueComparator: {
-            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;
-    }, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "onUpdate:modelValue" | "v-slot:label" | "v-slot:input">>> & vue.ShallowUnwrapRef<{
-        isFocused: Ref<boolean>;
+    } & {
+        inline: boolean;
+        error: boolean;
+        style: vue.StyleValue;
+        disabled: boolean;
+        multiple: boolean | null;
+        readonly: boolean;
+        density: Density;
+        ripple: boolean;
+        valueComparator: typeof deepEqual;
+    } & {
+        type?: string | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        color?: string | undefined;
+        value?: any;
+        label?: string | undefined;
+        class?: any;
+        theme?: string | undefined;
+        defaultsTarget?: string | undefined;
+        falseIcon?: IconValue | undefined;
+        trueIcon?: IconValue | undefined;
+        trueValue?: any;
+        falseValue?: any;
+    } & {
+        "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        isFocused: vue.ShallowRef<boolean>;
         input: Ref<HTMLInputElement | undefined>;
     }> & {} & vue.ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & vue.ComponentOptionsBase<Readonly<ExtractPropTypes<Omit<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: vue.PropType<IconValue>;
-    trueIcon: vue.PropType<IconValue>;
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        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;
-}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "onUpdate:modelValue" | "v-slot:label" | "v-slot:input">>>, {
-    isFocused: Ref<boolean>;
+} & vue.ComponentOptionsBase<{
+    inline: boolean;
+    error: boolean;
+    style: vue.StyleValue;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    density: Density;
+    ripple: boolean;
+    valueComparator: typeof deepEqual;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    class?: any;
+    theme?: string | undefined;
+    defaultsTarget?: string | undefined;
+    falseIcon?: IconValue | undefined;
+    trueIcon?: IconValue | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+}, {
+    isFocused: vue.ShallowRef<boolean>;
     input: Ref<HTMLInputElement | undefined>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (val: any) => boolean;
@@ -291,21 +294,40 @@ declare const VSelectionControl: {
     density: Density;
     ripple: boolean;
     valueComparator: typeof deepEqual;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {
+}, {}, string, vue.SlotsType<Partial<{
+    default: () => 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;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T_1>(props: {
     modelValue?: T_1 | undefined;
     'onUpdate:modelValue'?: ((val: T_1) => any) | undefined;
-}) => GenericProps<{
+}, slots: VSelectionControlSlots) => GenericProps<{
     modelValue?: T_1 | undefined;
     'onUpdate:modelValue'?: ((val: T_1) => any) | undefined;
 }, VSelectionControlSlots>) & 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;
@@ -327,24 +349,25 @@ declare const VSelectionControl: {
         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;
 }, 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;
@@ -366,11 +389,6 @@ declare const VSelectionControl: {
         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/VSelectionControlGroup/VSelectionControlGroup.mjs

@@ -15,6 +15,7 @@ export const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-contro
 export const makeSelectionControlGroupProps = propsFactory({
   color: String,
   disabled: Boolean,
+  defaultsTarget: String,
   error: Boolean,
   id: String,
   inline: Boolean,
@@ -36,19 +37,18 @@ export const makeSelectionControlGroupProps = propsFactory({
     type: Function,
     default: deepEqual
   },
-  ...makeThemeProps(),
-  ...makeDensityProps()
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeThemeProps()
+}, 'selection-control-group');
+export const makeVSelectionControlGroupProps = propsFactory({
+  ...makeSelectionControlGroupProps({
+    defaultsTarget: 'VSelectionControl'
+  })
 }, 'v-selection-control-group');
 export const VSelectionControlGroup = genericComponent()({
   name: 'VSelectionControlGroup',
-  props: {
-    defaultsTarget: {
-      type: String,
-      default: 'VSelectionControl'
-    },
-    ...makeComponentProps(),
-    ...makeSelectionControlGroupProps()
-  },
+  props: makeVSelectionControlGroupProps(),
   emits: {
     'update:modelValue': val => true
   },