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

package/lib/components/VRadioGroup/VRadioGroup.mjs

@@ -10,30 +10,31 @@ import { VLabel } from "../VLabel/index.mjs"; // Composables
 import { IconValue } from "../../composables/icons.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 import { computed } from 'vue';
-import { filterInputAttrs, genericComponent, getUid, omit, useRender } from "../../util/index.mjs"; // Types
+import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVRadioGroupProps = propsFactory({
+  height: {
+    type: [Number, String],
+    default: 'auto'
+  },
+  ...makeVInputProps(),
+  ...omit(makeSelectionControlGroupProps(), ['multiple']),
+  trueIcon: {
+    type: IconValue,
+    default: '$radioOn'
+  },
+  falseIcon: {
+    type: IconValue,
+    default: '$radioOff'
+  },
+  type: {
+    type: String,
+    default: 'radio'
+  }
+}, 'v-radio-group');
 export const VRadioGroup = genericComponent()({
   name: 'VRadioGroup',
   inheritAttrs: false,
-  props: {
-    height: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    ...makeVInputProps(),
-    ...omit(makeSelectionControlGroupProps(), ['multiple']),
-    trueIcon: {
-      type: IconValue,
-      default: '$radioOn'
-    },
-    falseIcon: {
-      type: IconValue,
-      default: '$radioOff'
-    },
-    type: {
-      type: String,
-      default: 'radio'
-    }
-  },
+  props: makeVRadioGroupProps(),
   emits: {
     'update:modelValue': val => true
   },

package/lib/components/VRadioGroup/VRadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VRadioGroup.mjs","names":["VSelectionControl","makeVInputProps","VInput","makeSelectionControlGroupProps","VSelectionControlGroup","VLabel","IconValue","useProxiedModel","computed","filterInputAttrs","genericComponent","getUid","omit","useRender","VRadioGroup","name","inheritAttrs","props","height","type","Number","String","default","trueIcon","falseIcon","emits","val","setup","_ref","attrs","slots","uid","id","model","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","label","for","value","_createVNode","_mergeProps","class","style","$event","_ref2","messagesId","isDisabled","isReadonly","_Fragment","undefined"],"sources":["../../../src/components/VRadioGroup/VRadioGroup.tsx"],"sourcesContent":["// Styles\nimport './VRadioGroup.sass'\n\n// Components\nimport { VSelectionControl } from '@/components/VSelectionControl'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { makeSelectionControlGroupProps, VSelectionControlGroup } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\nimport { VLabel } from '@/components/VLabel'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, omit, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport type VRadioGroupSlots = VInputSlots & VSelectionControlSlots\n\nexport const VRadioGroup = genericComponent<VRadioGroupSlots>()({\n  name: 'VRadioGroup',\n\n  inheritAttrs: false,\n\n  props: {\n    height: {\n      type: [Number, String],\n      default: 'auto',\n    },\n\n    ...makeVInputProps(),\n    ...omit(makeSelectionControlGroupProps(), ['multiple']),\n\n    trueIcon: {\n      type: IconValue,\n      default: '$radioOn',\n    },\n    falseIcon: {\n      type: IconValue,\n      default: '$radioOff',\n    },\n    type: {\n      type: String,\n      default: 'radio',\n    },\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const uid = getUid()\n    const id = computed(() => props.id || `radio-group-${uid}`)\n    const model = useProxiedModel(props, 'modelValue')\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 label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n\n      return (\n        <VInput\n          class={[\n            'v-radio-group',\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n            }) => (\n              <>\n                { label && (\n                  <VLabel id={ id.value }>\n                    { label }\n                  </VLabel>\n                )}\n\n                <VSelectionControlGroup\n                  { ...controlProps }\n                  id={ id.value }\n                  aria-describedby={ messagesId.value }\n                  defaultsTarget=\"VRadio\"\n                  trueIcon={ props.trueIcon }\n                  falseIcon={ props.falseIcon }\n                  type={ props.type }\n                  disabled={ isDisabled.value }\n                  readonly={ isReadonly.value }\n                  aria-labelledby={ label ? id.value : undefined }\n                  multiple={ false }\n                  { ...controlAttrs }\n                  v-model={ model.value }\n                  v-slots={ slots }\n                />\n              </>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRadioGroup = InstanceType<typeof VRadioGroup>\n"],"mappings":"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"}
+{"version":3,"file":"VRadioGroup.mjs","names":["VSelectionControl","makeVInputProps","VInput","makeSelectionControlGroupProps","VSelectionControlGroup","VLabel","IconValue","useProxiedModel","computed","filterInputAttrs","genericComponent","getUid","omit","propsFactory","useRender","makeVRadioGroupProps","height","type","Number","String","default","trueIcon","falseIcon","VRadioGroup","name","inheritAttrs","props","emits","val","setup","_ref","attrs","slots","uid","id","model","inputAttrs","controlAttrs","inputProps","_1","filterProps","controlProps","_2","label","for","value","_createVNode","_mergeProps","class","style","$event","_ref2","messagesId","isDisabled","isReadonly","_Fragment","undefined"],"sources":["../../../src/components/VRadioGroup/VRadioGroup.tsx"],"sourcesContent":["// Styles\nimport './VRadioGroup.sass'\n\n// Components\nimport { VSelectionControl } from '@/components/VSelectionControl'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { makeSelectionControlGroupProps, VSelectionControlGroup } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\nimport { VLabel } from '@/components/VLabel'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport type VRadioGroupSlots = VInputSlots & VSelectionControlSlots\n\nexport const makeVRadioGroupProps = propsFactory({\n  height: {\n    type: [Number, String],\n    default: 'auto',\n  },\n\n  ...makeVInputProps(),\n  ...omit(makeSelectionControlGroupProps(), ['multiple']),\n\n  trueIcon: {\n    type: IconValue,\n    default: '$radioOn',\n  },\n  falseIcon: {\n    type: IconValue,\n    default: '$radioOff',\n  },\n  type: {\n    type: String,\n    default: 'radio',\n  },\n}, 'v-radio-group')\n\nexport const VRadioGroup = genericComponent<VRadioGroupSlots>()({\n  name: 'VRadioGroup',\n\n  inheritAttrs: false,\n\n  props: makeVRadioGroupProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const uid = getUid()\n    const id = computed(() => props.id || `radio-group-${uid}`)\n    const model = useProxiedModel(props, 'modelValue')\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 label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n\n      return (\n        <VInput\n          class={[\n            'v-radio-group',\n            props.class,\n          ]}\n          style={ props.style }\n          { ...inputAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n            }) => (\n              <>\n                { label && (\n                  <VLabel id={ id.value }>\n                    { label }\n                  </VLabel>\n                )}\n\n                <VSelectionControlGroup\n                  { ...controlProps }\n                  id={ id.value }\n                  aria-describedby={ messagesId.value }\n                  defaultsTarget=\"VRadio\"\n                  trueIcon={ props.trueIcon }\n                  falseIcon={ props.falseIcon }\n                  type={ props.type }\n                  disabled={ isDisabled.value }\n                  readonly={ isReadonly.value }\n                  aria-labelledby={ label ? id.value : undefined }\n                  multiple={ false }\n                  { ...controlAttrs }\n                  v-model={ model.value }\n                  v-slots={ slots }\n                />\n              </>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRadioGroup = InstanceType<typeof VRadioGroup>\n"],"mappings":"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"}

package/lib/components/VRadioGroup/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>);
 
@@ -46,99 +50,121 @@ declare const VRadioGroup: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            type: string;
-            inline: boolean;
-            error: boolean;
-            height: string | number;
-            direction: "horizontal" | "vertical";
-            style: vue.StyleValue;
-            disabled: boolean;
-            readonly: boolean;
-            messages: string | string[];
-            density: Density;
-            ripple: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-            persistentHint: boolean;
-            falseIcon: IconValue;
-            trueIcon: IconValue;
-            valueComparator: typeof deepEqual;
-        }> & Omit<{
-            type: string;
-            inline: boolean;
-            error: boolean;
-            height: string | number;
-            direction: "horizontal" | "vertical";
-            style: vue.StyleValue;
-            disabled: boolean;
-            readonly: boolean;
-            messages: string | string[];
-            density: Density;
-            ripple: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-            persistentHint: boolean;
-            falseIcon: IconValue;
-            trueIcon: IconValue;
-            valueComparator: typeof deepEqual;
-        } & {
+        $props: {
+            type?: string | undefined;
+            inline?: boolean | undefined;
+            error?: boolean | undefined;
+            height?: string | number | undefined;
+            direction?: "horizontal" | "vertical" | undefined;
+            style?: vue.StyleValue | undefined;
+            disabled?: boolean | undefined;
+            readonly?: 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;
+            falseIcon?: IconValue | undefined;
+            trueIcon?: IconValue | undefined;
+            valueComparator?: typeof deepEqual | undefined;
+            key?: string | number | symbol | undefined;
             id?: string | undefined;
             name?: string | undefined;
             color?: string | undefined;
             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;
-        } & {
             $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>;
                 }) => vue.VNodeChild) | undefined;
                 input?: ((args_0: SelectionControlSlot) => 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>;
                 }) => vue.VNodeChild) | undefined;
                 input?: false | ((args_0: SelectionControlSlot) => 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"?: ((val: any) => any) | undefined;
+            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;
             "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;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-        } & {
-            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "type" | "inline" | "error" | "height" | "direction" | "style" | "disabled" | "readonly" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "falseIcon" | "trueIcon" | "valueComparator">;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -146,10 +172,33 @@ declare const VRadioGroup: {
             [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;
         }>;
-        $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", val: any) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -189,12 +238,14 @@ declare const VRadioGroup: {
             validationValue?: any;
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
+            defaultsTarget?: string | 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;
+                message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
                 label?: ((args_0: {
                     label: string | undefined;
                     props: Record<string, unknown>;
@@ -206,6 +257,7 @@ declare const VRadioGroup: {
                 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>;
@@ -217,6 +269,7 @@ declare const VRadioGroup: {
             "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>;
@@ -246,7 +299,32 @@ declare const VRadioGroup: {
             falseIcon: IconValue;
             trueIcon: IconValue;
             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;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -261,7 +339,7 @@ declare const VRadioGroup: {
             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;
@@ -303,12 +381,14 @@ declare const VRadioGroup: {
         validationValue?: any;
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
+        defaultsTarget?: string | 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;
+            message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
             label?: ((args_0: {
                 label: string | undefined;
                 props: Record<string, unknown>;
@@ -320,6 +400,7 @@ declare const VRadioGroup: {
             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>;
@@ -331,6 +412,7 @@ declare const VRadioGroup: {
         "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>;
@@ -379,12 +461,14 @@ declare const VRadioGroup: {
     validationValue?: any;
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
+    defaultsTarget?: string | 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;
+        message?: ((args_0: VMessageSlot) => vue.VNodeChild) | undefined;
         label?: ((args_0: {
             label: string | undefined;
             props: Record<string, unknown>;
@@ -396,6 +480,7 @@ declare const VRadioGroup: {
         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>;
@@ -407,6 +492,7 @@ declare const VRadioGroup: {
     "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>;
@@ -436,7 +522,32 @@ declare const VRadioGroup: {
     falseIcon: IconValue;
     trueIcon: IconValue;
     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;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     trueIcon: {
         type: vue.PropType<IconValue>;
         default: string;
@@ -454,8 +565,13 @@ declare const VRadioGroup: {
     id: StringConstructor;
     name: StringConstructor;
     color: StringConstructor;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
+    class: vue.PropType<any>;
     theme: StringConstructor;
     density: {
         type: vue.PropType<Density>;
@@ -467,6 +583,7 @@ declare const VRadioGroup: {
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultsTarget: StringConstructor;
     valueComparator: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
@@ -488,11 +605,6 @@ declare const VRadioGroup: {
     };
     validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
     validationValue: null;
-    class: vue.PropType<any>;
-    style: {
-        type: vue.PropType<vue.StyleValue>;
-        default: null;
-    };
     appendIcon: vue.PropType<IconValue>;
     prependIcon: vue.PropType<IconValue>;
     hideDetails: vue.PropType<boolean | "auto">;
@@ -531,8 +643,13 @@ declare const VRadioGroup: {
     id: StringConstructor;
     name: StringConstructor;
     color: StringConstructor;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
+    class: vue.PropType<any>;
     theme: StringConstructor;
     density: {
         type: vue.PropType<Density>;
@@ -544,6 +661,7 @@ declare const VRadioGroup: {
         type: BooleanConstructor;
         default: boolean;
     };
+    defaultsTarget: StringConstructor;
     valueComparator: {
         type: vue.PropType<typeof deepEqual>;
         default: typeof deepEqual;
@@ -565,11 +683,6 @@ declare const VRadioGroup: {
     };
     validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
     validationValue: null;
-    class: vue.PropType<any>;
-    style: {
-        type: vue.PropType<vue.StyleValue>;
-        default: null;
-    };
     appendIcon: vue.PropType<IconValue>;
     prependIcon: vue.PropType<IconValue>;
     hideDetails: vue.PropType<boolean | "auto">;

package/lib/components/VRangeSlider/VRangeSlider.mjs

@@ -9,21 +9,23 @@ import { VLabel } from "../VLabel/index.mjs";
 import { VSliderThumb } from "../VSlider/VSliderThumb.mjs";
 import { VSliderTrack } from "../VSlider/VSliderTrack.mjs"; // Composables
 import { makeFocusProps, useFocus } from "../../composables/focus.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { useRtl } from "../../composables/locale.mjs"; // Utilities
 import { computed, ref } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs"; // Types
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVRangeSliderProps = propsFactory({
+  ...makeFocusProps(),
+  ...makeVInputProps(),
+  ...makeSliderProps(),
+  strict: Boolean,
+  modelValue: {
+    type: Array,
+    default: () => [0, 0]
+  }
+}, 'v-range-slider');
 export const VRangeSlider = genericComponent()({
   name: 'VRangeSlider',
-  props: {
-    ...makeFocusProps(),
-    ...makeVInputProps(),
-    ...makeSliderProps(),
-    strict: Boolean,
-    modelValue: {
-      type: Array,
-      default: () => [0, 0]
-    }
-  },
+  props: makeVRangeSliderProps(),
   emits: {
     'update:focused': value => true,
     'update:modelValue': value => true,
@@ -38,6 +40,9 @@ export const VRangeSlider = genericComponent()({
     const startThumbRef = ref();
     const stopThumbRef = ref();
     const inputRef = ref();
+    const {
+      rtlClasses
+    } = useRtl();
     function getActiveThumb(e) {
       if (!startThumbRef.value || !stopThumbRef.value) return;
       const startOffset = getOffset(e, startThumbRef.value.$el, props.direction);
@@ -108,7 +113,7 @@ export const VRangeSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }, props.class],
+        }, rtlClasses.value, props.class],
         "style": props.style,
         "ref": inputRef
       }, inputProps, {