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

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

@@ -11,7 +11,7 @@ declare const EventProp: <T extends any[] = any[]>() => PropType<EventProp<T, (.
 
 type Density = null | 'default' | 'comfortable' | 'compact';
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 type SelectionControlSlot = {
@@ -52,6 +52,7 @@ declare const VRadioGroup: {
             error: boolean;
             height: string | number;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             messages: string | string[];
@@ -71,6 +72,7 @@ declare const VRadioGroup: {
             error: boolean;
             height: string | number;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             messages: string | string[];
@@ -89,6 +91,7 @@ declare const VRadioGroup: {
             name?: string | undefined;
             color?: string | undefined;
             label?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             modelValue?: any;
             prependIcon?: IconValue | undefined;
@@ -101,8 +104,8 @@ declare const VRadioGroup: {
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -112,19 +115,8 @@ declare const VRadioGroup: {
                 }) => vue.VNodeChild) | undefined;
                 input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                label?: ((args_0: {
-                    label: string | undefined;
-                    props: Record<string, unknown>;
-                }) => vue.VNodeChild) | undefined;
-                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
-                default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+                default?: false | ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -135,7 +127,7 @@ declare const VRadioGroup: {
                 input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -146,7 +138,7 @@ declare const VRadioGroup: {
             "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" | "disabled" | "readonly" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "falseIcon" | "trueIcon" | "valueComparator">;
+        } & 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;
         };
@@ -166,6 +158,7 @@ declare const VRadioGroup: {
             error: boolean;
             height: string | number;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             messages: string | string[];
@@ -184,6 +177,7 @@ declare const VRadioGroup: {
             name?: string | undefined;
             color?: string | undefined;
             label?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             modelValue?: any;
             prependIcon?: IconValue | undefined;
@@ -196,8 +190,8 @@ declare const VRadioGroup: {
             hint?: string | undefined;
             hideDetails?: boolean | "auto" | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -207,19 +201,8 @@ declare const VRadioGroup: {
                 }) => vue.VNodeChild) | undefined;
                 input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                label?: ((args_0: {
-                    label: string | undefined;
-                    props: Record<string, unknown>;
-                }) => vue.VNodeChild) | undefined;
-                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
-                default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+                default?: false | ((...args: never) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -230,7 +213,7 @@ declare const VRadioGroup: {
                 input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -249,6 +232,7 @@ declare const VRadioGroup: {
             error: boolean;
             height: string | number;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             messages: string | string[];
@@ -288,6 +272,7 @@ declare const VRadioGroup: {
         error: boolean;
         height: string | number;
         direction: "horizontal" | "vertical";
+        style: vue.StyleValue;
         disabled: boolean;
         readonly: boolean;
         messages: string | string[];
@@ -306,6 +291,7 @@ declare const VRadioGroup: {
         name?: string | undefined;
         color?: string | undefined;
         label?: string | undefined;
+        class?: any;
         theme?: string | undefined;
         modelValue?: any;
         prependIcon?: IconValue | undefined;
@@ -318,8 +304,8 @@ declare const VRadioGroup: {
         hint?: string | undefined;
         hideDetails?: boolean | "auto" | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
-            default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+            default?: ((...args: never) => vue.VNodeChild) | undefined;
             prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -329,19 +315,8 @@ declare const VRadioGroup: {
             }) => vue.VNodeChild) | undefined;
             input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-            prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            label?: ((args_0: {
-                label: string | undefined;
-                props: Record<string, unknown>;
-            }) => vue.VNodeChild) | undefined;
-            input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
-            default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+            default?: false | ((...args: never) => vue.VNodeChild) | undefined;
             prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -352,7 +327,7 @@ declare const VRadioGroup: {
             input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
         "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -373,6 +348,7 @@ declare const VRadioGroup: {
     error: boolean;
     height: string | number;
     direction: "horizontal" | "vertical";
+    style: vue.StyleValue;
     disabled: boolean;
     readonly: boolean;
     messages: string | string[];
@@ -391,6 +367,7 @@ declare const VRadioGroup: {
     name?: string | undefined;
     color?: string | undefined;
     label?: string | undefined;
+    class?: any;
     theme?: string | undefined;
     modelValue?: any;
     prependIcon?: IconValue | undefined;
@@ -403,8 +380,8 @@ declare const VRadioGroup: {
     hint?: string | undefined;
     hideDetails?: boolean | "auto" | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
-        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    $children?: vue.VNodeChild | ((...args: never) => vue.VNodeChild) | {
+        default?: ((...args: never) => vue.VNodeChild) | undefined;
         prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -414,19 +391,8 @@ declare const VRadioGroup: {
         }) => vue.VNodeChild) | undefined;
         input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
-        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        label?: ((args_0: {
-            label: string | undefined;
-            props: Record<string, unknown>;
-        }) => vue.VNodeChild) | undefined;
-        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
-        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        default?: false | ((...args: never) => vue.VNodeChild) | undefined;
         prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -437,7 +403,7 @@ declare const VRadioGroup: {
         input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:default"?: false | ((...args: never) => vue.VNodeChild) | undefined;
     "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
     "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -456,6 +422,7 @@ declare const VRadioGroup: {
     error: boolean;
     height: string | number;
     direction: "horizontal" | "vertical";
+    style: vue.StyleValue;
     disabled: boolean;
     readonly: boolean;
     messages: string | string[];
@@ -521,6 +488,11 @@ 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">;
@@ -593,6 +565,11 @@ 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

@@ -108,7 +108,8 @@ export const VRangeSlider = genericComponent()({
           'v-slider--focused': isFocused.value,
           'v-slider--pressed': mousePressed.value,
           'v-slider--disabled': props.disabled
-        }],
+        }, props.class],
+        "style": props.style,
         "ref": inputRef
       }, inputProps, {
         "focused": isFocused.value

package/lib/components/VRangeSlider/VRangeSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VRangeSlider.mjs","names":["makeVInputProps","VInput","getOffset","makeSliderProps","useSlider","useSteps","VLabel","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","useProxiedModel","computed","ref","genericComponent","useRender","VRangeSlider","name","props","strict","Boolean","modelValue","type","Array","default","emits","value","end","start","setup","_ref","slots","emit","startThumbRef","stopThumbRef","inputRef","getActiveThumb","e","startOffset","$el","direction","stopOffset","a","Math","abs","b","steps","model","undefined","arr","length","map","roundValue","activeThumbRef","hasLabels","max","min","mousePressed","onSliderMousedown","onSliderTouchstart","position","trackContainerRef","onSliderStart","onSliderEnd","_ref2","newValue","onSliderMove","_ref3","stop","focus","isFocused","blur","trackStart","trackStop","inputProps","_","filterProps","hasPrepend","label","prepend","_createVNode","_mergeProps","disabled","slotProps","_Fragment","_ref4","id","messagesId","readonly","v","relatedTarget","onBlur"],"sources":["../../../src/components/VRangeSlider/VRangeSlider.tsx"],"sourcesContent":["// Styles\nimport '../VSlider/VSlider.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { getOffset, makeSliderProps, useSlider, useSteps } from '@/components/VSlider/slider'\nimport { VLabel } from '@/components/VLabel'\nimport { VSliderThumb } from '@/components/VSlider/VSliderThumb'\nimport { VSliderTrack } from '@/components/VSlider/VSliderTrack'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType, WritableComputedRef } from 'vue'\nimport type { VSliderSlots } from '../VSlider/VSlider'\n\nexport const VRangeSlider = genericComponent<VSliderSlots>()({\n  name: 'VRangeSlider',\n\n  props: {\n    ...makeFocusProps(),\n    ...makeVInputProps(),\n    ...makeSliderProps(),\n\n    strict: Boolean,\n    modelValue: {\n      type: Array as PropType<number[]>,\n      default: () => ([0, 0]),\n    },\n  },\n\n  emits: {\n    'update:focused': (value: boolean) => true,\n    'update:modelValue': (value: [number, number]) => true,\n    end: (value: [number, number]) => true,\n    start: (value: [number, number]) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const startThumbRef = ref<VSliderThumb>()\n    const stopThumbRef = ref<VSliderThumb>()\n    const inputRef = ref<VInput>()\n\n    function getActiveThumb (e: MouseEvent | TouchEvent) {\n      if (!startThumbRef.value || !stopThumbRef.value) return\n\n      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction)\n      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction)\n\n      const a = Math.abs(startOffset)\n      const b = Math.abs(stopOffset)\n\n      return (a < b || (a === b && startOffset < 0)) ? startThumbRef.value.$el : stopThumbRef.value.$el\n    }\n\n    const steps = useSteps(props)\n\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      arr => {\n        if (!arr?.length) return [0, 0]\n\n        return arr.map(value => steps.roundValue(value))\n      },\n    ) as WritableComputedRef<[number, number]> & { readonly externalValue: number[] }\n\n    const {\n      activeThumbRef,\n      hasLabels,\n      max,\n      min,\n      mousePressed,\n      onSliderMousedown,\n      onSliderTouchstart,\n      position,\n      trackContainerRef,\n    } = useSlider({\n      props,\n      steps,\n      onSliderStart: () => {\n        emit('start', model.value)\n      },\n      onSliderEnd: ({ value }) => {\n        const newValue: [number, number] = activeThumbRef.value === startThumbRef.value?.$el\n          ? [value, model.value[1]]\n          : [model.value[0], value]\n\n        model.value = newValue\n        emit('end', newValue)\n      },\n      onSliderMove: ({ value }) => {\n        const [start, stop] = model.value\n\n        if (!props.strict && start === stop && start !== min.value) {\n          activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el\n          activeThumbRef.value?.focus()\n        }\n\n        if (activeThumbRef.value === startThumbRef.value?.$el) {\n          model.value = [Math.min(value, stop), stop]\n        } else {\n          model.value = [start, Math.max(start, value)]\n        }\n      },\n      getActiveThumb,\n    })\n\n    const { isFocused, focus, blur } = useFocus(props)\n    const trackStart = computed(() => position(model.value[0]))\n    const trackStop = computed(() => position(model.value[1]))\n\n    useRender(() => {\n      const [inputProps, _] = VInput.filterProps(props)\n      const hasPrepend = !!(props.label || slots.label || slots.prepend)\n\n      return (\n        <VInput\n          class={[\n            'v-slider',\n            'v-range-slider',\n            {\n              'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,\n              'v-slider--focused': isFocused.value,\n              'v-slider--pressed': mousePressed.value,\n              'v-slider--disabled': props.disabled,\n            },\n          ]}\n          ref={ inputRef }\n          { ...inputProps }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => (\n              <>\n                { slots.label?.(slotProps) ?? props.label\n                  ? (\n                    <VLabel\n                      class=\"v-slider__label\"\n                      text={ props.label }\n                    />\n                  ) : undefined\n                }\n\n                { slots.prepend?.(slotProps) }\n              </>\n            ) : undefined,\n            default: ({ id, messagesId }) => (\n              <div\n                class=\"v-slider__container\"\n                onMousedown={ onSliderMousedown }\n                onTouchstartPassive={ onSliderTouchstart }\n              >\n                <input\n                  id={ `${id.value}_start` }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value[0] }\n                />\n\n                <input\n                  id={ `${id.value}_stop` }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value[1] }\n                />\n\n                <VSliderTrack\n                  ref={ trackContainerRef }\n                  start={ trackStart.value }\n                  stop={ trackStop.value }\n                >\n                  {{ 'tick-label': slots['tick-label'] }}\n                </VSliderTrack>\n\n                <VSliderThumb\n                  ref={ startThumbRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused && activeThumbRef.value === startThumbRef.value?.$el }\n                  modelValue={ model.value[0] }\n                  onUpdate:modelValue={ v => (model.value = [v, model.value[1]]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = startThumbRef.value?.$el\n\n                    // Make sure second thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at minimum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[1] === min.value &&\n                      e.relatedTarget !== stopThumbRef.value?.$el\n                    ) {\n                      startThumbRef.value?.$el.blur()\n                      stopThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ min.value }\n                  max={ model.value[1] }\n                  position={ trackStart.value }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n\n                <VSliderThumb\n                  ref={ stopThumbRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused && activeThumbRef.value === stopThumbRef.value?.$el }\n                  modelValue={ model.value[1] }\n                  onUpdate:modelValue={ v => (model.value = [model.value[0], v]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = stopThumbRef.value?.$el\n\n                    // Make sure first thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at maximum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[0] === max.value &&\n                      e.relatedTarget !== startThumbRef.value?.$el\n                    ) {\n                      stopThumbRef.value?.$el.blur()\n                      startThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ model.value[0] }\n                  max={ max.value }\n                  position={ trackStop.value }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n              </div>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRangeSlider = InstanceType<typeof VRangeSlider>\n"],"mappings":"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"}
+{"version":3,"file":"VRangeSlider.mjs","names":["makeVInputProps","VInput","getOffset","makeSliderProps","useSlider","useSteps","VLabel","VSliderThumb","VSliderTrack","makeFocusProps","useFocus","useProxiedModel","computed","ref","genericComponent","useRender","VRangeSlider","name","props","strict","Boolean","modelValue","type","Array","default","emits","value","end","start","setup","_ref","slots","emit","startThumbRef","stopThumbRef","inputRef","getActiveThumb","e","startOffset","$el","direction","stopOffset","a","Math","abs","b","steps","model","undefined","arr","length","map","roundValue","activeThumbRef","hasLabels","max","min","mousePressed","onSliderMousedown","onSliderTouchstart","position","trackContainerRef","onSliderStart","onSliderEnd","_ref2","newValue","onSliderMove","_ref3","stop","focus","isFocused","blur","trackStart","trackStop","inputProps","_","filterProps","hasPrepend","label","prepend","_createVNode","_mergeProps","disabled","class","style","slotProps","_Fragment","_ref4","id","messagesId","readonly","v","relatedTarget","onBlur"],"sources":["../../../src/components/VRangeSlider/VRangeSlider.tsx"],"sourcesContent":["// Styles\nimport '../VSlider/VSlider.sass'\n\n// Components\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { getOffset, makeSliderProps, useSlider, useSteps } from '@/components/VSlider/slider'\nimport { VLabel } from '@/components/VLabel'\nimport { VSliderThumb } from '@/components/VSlider/VSliderThumb'\nimport { VSliderTrack } from '@/components/VSlider/VSliderTrack'\n\n// Composables\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType, WritableComputedRef } from 'vue'\nimport type { VSliderSlots } from '../VSlider/VSlider'\n\nexport const VRangeSlider = genericComponent<VSliderSlots>()({\n  name: 'VRangeSlider',\n\n  props: {\n    ...makeFocusProps(),\n    ...makeVInputProps(),\n    ...makeSliderProps(),\n\n    strict: Boolean,\n    modelValue: {\n      type: Array as PropType<number[]>,\n      default: () => ([0, 0]),\n    },\n  },\n\n  emits: {\n    'update:focused': (value: boolean) => true,\n    'update:modelValue': (value: [number, number]) => true,\n    end: (value: [number, number]) => true,\n    start: (value: [number, number]) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const startThumbRef = ref<VSliderThumb>()\n    const stopThumbRef = ref<VSliderThumb>()\n    const inputRef = ref<VInput>()\n\n    function getActiveThumb (e: MouseEvent | TouchEvent) {\n      if (!startThumbRef.value || !stopThumbRef.value) return\n\n      const startOffset = getOffset(e, startThumbRef.value.$el, props.direction)\n      const stopOffset = getOffset(e, stopThumbRef.value.$el, props.direction)\n\n      const a = Math.abs(startOffset)\n      const b = Math.abs(stopOffset)\n\n      return (a < b || (a === b && startOffset < 0)) ? startThumbRef.value.$el : stopThumbRef.value.$el\n    }\n\n    const steps = useSteps(props)\n\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      arr => {\n        if (!arr?.length) return [0, 0]\n\n        return arr.map(value => steps.roundValue(value))\n      },\n    ) as WritableComputedRef<[number, number]> & { readonly externalValue: number[] }\n\n    const {\n      activeThumbRef,\n      hasLabels,\n      max,\n      min,\n      mousePressed,\n      onSliderMousedown,\n      onSliderTouchstart,\n      position,\n      trackContainerRef,\n    } = useSlider({\n      props,\n      steps,\n      onSliderStart: () => {\n        emit('start', model.value)\n      },\n      onSliderEnd: ({ value }) => {\n        const newValue: [number, number] = activeThumbRef.value === startThumbRef.value?.$el\n          ? [value, model.value[1]]\n          : [model.value[0], value]\n\n        model.value = newValue\n        emit('end', newValue)\n      },\n      onSliderMove: ({ value }) => {\n        const [start, stop] = model.value\n\n        if (!props.strict && start === stop && start !== min.value) {\n          activeThumbRef.value = value > start ? stopThumbRef.value?.$el : startThumbRef.value?.$el\n          activeThumbRef.value?.focus()\n        }\n\n        if (activeThumbRef.value === startThumbRef.value?.$el) {\n          model.value = [Math.min(value, stop), stop]\n        } else {\n          model.value = [start, Math.max(start, value)]\n        }\n      },\n      getActiveThumb,\n    })\n\n    const { isFocused, focus, blur } = useFocus(props)\n    const trackStart = computed(() => position(model.value[0]))\n    const trackStop = computed(() => position(model.value[1]))\n\n    useRender(() => {\n      const [inputProps, _] = VInput.filterProps(props)\n      const hasPrepend = !!(props.label || slots.label || slots.prepend)\n\n      return (\n        <VInput\n          class={[\n            'v-slider',\n            'v-range-slider',\n            {\n              'v-slider--has-labels': !!slots['tick-label'] || hasLabels.value,\n              'v-slider--focused': isFocused.value,\n              'v-slider--pressed': mousePressed.value,\n              'v-slider--disabled': props.disabled,\n            },\n            props.class,\n          ]}\n          style={ props.style }\n          ref={ inputRef }\n          { ...inputProps }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            prepend: hasPrepend ? slotProps => (\n              <>\n                { slots.label?.(slotProps) ?? props.label\n                  ? (\n                    <VLabel\n                      class=\"v-slider__label\"\n                      text={ props.label }\n                    />\n                  ) : undefined\n                }\n\n                { slots.prepend?.(slotProps) }\n              </>\n            ) : undefined,\n            default: ({ id, messagesId }) => (\n              <div\n                class=\"v-slider__container\"\n                onMousedown={ onSliderMousedown }\n                onTouchstartPassive={ onSliderTouchstart }\n              >\n                <input\n                  id={ `${id.value}_start` }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value[0] }\n                />\n\n                <input\n                  id={ `${id.value}_stop` }\n                  name={ props.name || id.value }\n                  disabled={ props.disabled }\n                  readonly={ props.readonly }\n                  tabindex=\"-1\"\n                  value={ model.value[1] }\n                />\n\n                <VSliderTrack\n                  ref={ trackContainerRef }\n                  start={ trackStart.value }\n                  stop={ trackStop.value }\n                >\n                  {{ 'tick-label': slots['tick-label'] }}\n                </VSliderTrack>\n\n                <VSliderThumb\n                  ref={ startThumbRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused && activeThumbRef.value === startThumbRef.value?.$el }\n                  modelValue={ model.value[0] }\n                  onUpdate:modelValue={ v => (model.value = [v, model.value[1]]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = startThumbRef.value?.$el\n\n                    // Make sure second thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at minimum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[1] === min.value &&\n                      e.relatedTarget !== stopThumbRef.value?.$el\n                    ) {\n                      startThumbRef.value?.$el.blur()\n                      stopThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ min.value }\n                  max={ model.value[1] }\n                  position={ trackStart.value }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n\n                <VSliderThumb\n                  ref={ stopThumbRef }\n                  aria-describedby={ messagesId.value }\n                  focused={ isFocused && activeThumbRef.value === stopThumbRef.value?.$el }\n                  modelValue={ model.value[1] }\n                  onUpdate:modelValue={ v => (model.value = [model.value[0], v]) }\n                  onFocus={ (e: FocusEvent) => {\n                    focus()\n                    activeThumbRef.value = stopThumbRef.value?.$el\n\n                    // Make sure first thumb is focused if\n                    // the thumbs are on top of each other\n                    // and they are both at maximum value\n                    // but only if focused from outside.\n                    if (\n                      model.value[0] === model.value[1] &&\n                      model.value[0] === max.value &&\n                      e.relatedTarget !== startThumbRef.value?.$el\n                    ) {\n                      stopThumbRef.value?.$el.blur()\n                      startThumbRef.value?.$el.focus()\n                    }\n                  }}\n                  onBlur={ () => {\n                    blur()\n                    activeThumbRef.value = undefined\n                  }}\n                  min={ model.value[0] }\n                  max={ max.value }\n                  position={ trackStop.value }\n                >\n                  {{ 'thumb-label': slots['thumb-label'] }}\n                </VSliderThumb>\n              </div>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRangeSlider = InstanceType<typeof VRangeSlider>\n"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ type Density = null | 'default' | 'comfortable' | 'compact';
 type ValidationResult = string | boolean;
 type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 interface VInputSlot {
@@ -40,6 +40,7 @@ declare const VRangeSlider: {
             error: boolean;
             strict: boolean;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             step: string | number;
@@ -65,6 +66,7 @@ declare const VRangeSlider: {
             error: boolean;
             strict: boolean;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             step: string | number;
@@ -87,6 +89,7 @@ declare const VRangeSlider: {
             name?: string | undefined;
             color?: string | undefined;
             label?: string | undefined;
+            class?: any;
             rounded?: string | number | boolean | undefined;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
@@ -103,7 +106,7 @@ declare const VRangeSlider: {
             thumbLabel?: boolean | "always" | undefined;
             ticks?: number[] | Record<number, string> | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | ((args_0: VInputSlot) => vue.VNodeChild) | {
                 default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -111,14 +114,6 @@ declare const VRangeSlider: {
                 'tick-label'?: (() => vue.VNodeChild) | undefined;
                 'thumb-label'?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                'tick-label'?: (() => vue.VNodeChild) | undefined;
-                'thumb-label'?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -139,7 +134,7 @@ declare const VRangeSlider: {
             "onUpdate:focused"?: ((value: boolean) => any) | undefined;
             onEnd?: ((value: [number, number]) => any) | undefined;
             onStart?: ((value: [number, number]) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "reverse" | "max" | "error" | "strict" | "direction" | "disabled" | "readonly" | "step" | "min" | "elevation" | "messages" | "rounded" | "density" | "modelValue" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "showTicks" | "tickSize" | "trackSize" | "thumbLabel" | "thumbSize">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "reverse" | "max" | "error" | "strict" | "direction" | "style" | "disabled" | "readonly" | "step" | "min" | "elevation" | "messages" | "rounded" | "density" | "modelValue" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "showTicks" | "tickSize" | "trackSize" | "thumbLabel" | "thumbSize">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -159,6 +154,7 @@ declare const VRangeSlider: {
             error: boolean;
             strict: boolean;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             step: string | number;
@@ -181,6 +177,7 @@ declare const VRangeSlider: {
             name?: string | undefined;
             color?: string | undefined;
             label?: string | undefined;
+            class?: any;
             rounded?: string | number | boolean | undefined;
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
@@ -197,7 +194,7 @@ declare const VRangeSlider: {
             thumbLabel?: boolean | "always" | undefined;
             ticks?: number[] | Record<number, string> | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | ((args_0: VInputSlot) => vue.VNodeChild) | {
                 default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -205,14 +202,6 @@ declare const VRangeSlider: {
                 'tick-label'?: (() => vue.VNodeChild) | undefined;
                 'thumb-label'?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-                'tick-label'?: (() => vue.VNodeChild) | undefined;
-                'thumb-label'?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
                 prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -244,6 +233,7 @@ declare const VRangeSlider: {
             error: boolean;
             strict: boolean;
             direction: "horizontal" | "vertical";
+            style: vue.StyleValue;
             disabled: boolean;
             readonly: boolean;
             step: string | number;
@@ -289,6 +279,7 @@ declare const VRangeSlider: {
         error: boolean;
         strict: boolean;
         direction: "horizontal" | "vertical";
+        style: vue.StyleValue;
         disabled: boolean;
         readonly: boolean;
         step: string | number;
@@ -311,6 +302,7 @@ declare const VRangeSlider: {
         name?: string | undefined;
         color?: string | undefined;
         label?: string | undefined;
+        class?: any;
         rounded?: string | number | boolean | undefined;
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
@@ -327,7 +319,7 @@ declare const VRangeSlider: {
         thumbLabel?: boolean | "always" | undefined;
         ticks?: number[] | Record<number, string> | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | ((args_0: VInputSlot) => vue.VNodeChild) | {
             default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -335,14 +327,6 @@ declare const VRangeSlider: {
             'tick-label'?: (() => vue.VNodeChild) | undefined;
             'thumb-label'?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-            'tick-label'?: (() => vue.VNodeChild) | undefined;
-            'thumb-label'?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
             prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -373,6 +357,7 @@ declare const VRangeSlider: {
     error: boolean;
     strict: boolean;
     direction: "horizontal" | "vertical";
+    style: vue.StyleValue;
     disabled: boolean;
     readonly: boolean;
     step: string | number;
@@ -395,6 +380,7 @@ declare const VRangeSlider: {
     name?: string | undefined;
     color?: string | undefined;
     label?: string | undefined;
+    class?: any;
     rounded?: string | number | boolean | undefined;
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
@@ -411,7 +397,7 @@ declare const VRangeSlider: {
     thumbLabel?: boolean | "always" | undefined;
     ticks?: number[] | Record<number, string> | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | ((args_0: VInputSlot) => vue.VNodeChild) | {
         default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -419,14 +405,6 @@ declare const VRangeSlider: {
         'tick-label'?: (() => vue.VNodeChild) | undefined;
         'thumb-label'?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
-        'tick-label'?: (() => vue.VNodeChild) | undefined;
-        'thumb-label'?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
         prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
@@ -458,6 +436,7 @@ declare const VRangeSlider: {
     error: boolean;
     strict: boolean;
     direction: "horizontal" | "vertical";
+    style: vue.StyleValue;
     disabled: boolean;
     readonly: boolean;
     step: string | number;
@@ -567,6 +546,11 @@ declare const VRangeSlider: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     id: StringConstructor;
     appendIcon: PropType<IconValue>;
     prependIcon: PropType<IconValue>;
@@ -669,6 +653,11 @@ declare const VRangeSlider: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
+    };
     id: StringConstructor;
     appendIcon: PropType<IconValue>;
     prependIcon: PropType<IconValue>;

package/lib/components/VRating/VRating.mjs

@@ -5,6 +5,7 @@ import "./VRating.css";
 // Components
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 import { IconValue } from "../../composables/icons.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps } from "../../composables/density.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
@@ -51,6 +52,7 @@ export const VRating = genericComponent()({
       validator: v => ['top', 'bottom'].includes(v)
     },
     ripple: Boolean,
+    ...makeComponentProps(),
     ...makeDensityProps(),
     ...makeSizeProps(),
     ...makeTagProps(),
@@ -168,7 +170,8 @@ export const VRating = genericComponent()({
         "class": ['v-rating', {
           'v-rating--hover': props.hover,
           'v-rating--readonly': props.readonly
-        }, themeClasses.value]
+        }, themeClasses.value, props.class],
+        "style": props.style
       }, {
         default: () => [_createVNode(VRatingItem, {
           "value": 0,