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

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

@@ -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,12 +89,13 @@ 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;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -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,12 +177,13 @@ 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;
             'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
             'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-            'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+            'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
             hint?: string | undefined;
@@ -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,12 +302,13 @@ 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;
         'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
         'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-        'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+        'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
         validateOn?: "input" | "blur" | "submit" | undefined;
         validationValue?: any;
         hint?: string | undefined;
@@ -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,12 +380,13 @@ 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;
     'onClick:append'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
     'onClick:prepend'?: EventProp<[MouseEvent], (args_0: MouseEvent) => any> | undefined;
-    'onUpdate:focused'?: EventProp<[FocusEvent], (args_0: FocusEvent) => any> | undefined;
+    'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
     validateOn?: "input" | "blur" | "submit" | undefined;
     validationValue?: any;
     hint?: string | undefined;
@@ -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;
@@ -545,7 +524,7 @@ declare const VRangeSlider: {
     };
     reverse: BooleanConstructor;
     focused: BooleanConstructor;
-    'onUpdate:focused': PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: PropType<string | string[]>;
         default: () => never[];
@@ -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>;
@@ -647,7 +631,7 @@ declare const VRangeSlider: {
     };
     reverse: BooleanConstructor;
     focused: BooleanConstructor;
-    'onUpdate:focused': PropType<EventProp<[FocusEvent], (args_0: FocusEvent) => any>>;
+    'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
         type: PropType<string | string[]>;
         default: () => never[];
@@ -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,

package/lib/components/VRating/VRating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VRating.mjs","names":["VBtn","IconValue","makeDensityProps","makeSizeProps","makeTagProps","makeThemeProps","provideTheme","useLocale","useProxiedModel","computed","ref","clamp","createRange","genericComponent","getUid","useRender","VRating","name","props","String","itemAriaLabel","type","default","activeColor","color","clearable","Boolean","disabled","emptyIcon","fullIcon","halfIncrements","hover","length","Number","readonly","modelValue","itemLabels","Array","itemLabelPosition","validator","v","includes","ripple","emits","value","setup","_ref","slots","t","themeClasses","rating","normalizedValue","parseFloat","range","increments","flatMap","hoverIndex","itemState","map","isHovering","isFilled","isHovered","isFullIcon","icon","eventState","onMouseenter","onMouseleave","onClick","undefined","VRatingItem","_ref2","index","showStar","id","replace","btnProps","density","size","variant","_createVNode","_Fragment","item","createLabel","labelProps","label","_createTextVNode","hasLabels","tag","i"],"sources":["../../../src/components/VRating/VRating.tsx"],"sourcesContent":["// Styles\nimport './VRating.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps } from '@/composables/density'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { clamp, createRange, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport type { Variant } from '@/composables/variant'\n\ntype VRatingItemSlot = {\n  value: number\n  index: number\n  isFilled: boolean\n  isHovered: boolean\n  icon: IconValue\n  color?: string\n  props: Record<string, unknown>\n  rating: number\n}\n\ntype VRatingItemLabelSlot = {\n  value: number\n  index: number\n  label?: string\n}\n\ntype VRatingSlots = {\n  item: [VRatingItemSlot]\n  'item-label': [VRatingItemLabelSlot]\n}\n\nexport const VRating = genericComponent<VRatingSlots>()({\n  name: 'VRating',\n\n  props: {\n    name: String,\n    itemAriaLabel: {\n      type: String,\n      default: '$vuetify.rating.ariaLabel.item',\n    },\n    activeColor: String,\n    color: String,\n    clearable: Boolean,\n    disabled: Boolean,\n    emptyIcon: {\n      type: IconValue,\n      default: '$ratingEmpty',\n    },\n    fullIcon: {\n      type: IconValue,\n      default: '$ratingFull',\n    },\n    halfIncrements: Boolean,\n    hover: Boolean,\n    length: {\n      type: [Number, String],\n      default: 5,\n    },\n    readonly: Boolean,\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n    itemLabels: Array as Prop<string[]>,\n    itemLabelPosition: {\n      type: String,\n      default: 'top',\n      validator: (v: any) => ['top', 'bottom'].includes(v),\n    },\n    ripple: Boolean,\n\n    ...makeDensityProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: number | string) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { themeClasses } = provideTheme(props)\n    const rating = useProxiedModel(props, 'modelValue')\n    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length))\n\n    const range = computed(() => createRange(Number(props.length), 1))\n    const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]))\n    const hoverIndex = ref(-1)\n\n    const itemState = computed(() => increments.value.map(value => {\n      const isHovering = props.hover && hoverIndex.value > -1\n      const isFilled = normalizedValue.value >= value\n      const isHovered = hoverIndex.value >= value\n      const isFullIcon = isHovering ? isHovered : isFilled\n      const icon = isFullIcon ? props.fullIcon : props.emptyIcon\n      const activeColor = props.activeColor ?? props.color\n      const color = (isFilled || isHovered) ? activeColor : props.color\n\n      return { isFilled, isHovered, icon, color }\n    }))\n\n    const eventState = computed(() => [0, ...increments.value].map(value => {\n      function onMouseenter () {\n        hoverIndex.value = value\n      }\n\n      function onMouseleave () {\n        hoverIndex.value = -1\n      }\n\n      function onClick () {\n        if (props.disabled || props.readonly) return\n        rating.value = normalizedValue.value === value && props.clearable ? 0 : value\n      }\n\n      return {\n        onMouseenter: props.hover ? onMouseenter : undefined,\n        onMouseleave: props.hover ? onMouseleave : undefined,\n        onClick,\n      }\n    }))\n\n    const name = computed(() => props.name ?? `v-rating-${getUid()}`)\n\n    function VRatingItem ({ value, index, showStar = true }: { value: number, index: number, showStar?: boolean }) {\n      const { onMouseenter, onMouseleave, onClick } = eventState.value[index + 1]\n      const id = `${name.value}-${String(value).replace('.', '-')}`\n      const btnProps = {\n        color: itemState.value[index]?.color,\n        density: props.density,\n        disabled: props.disabled,\n        icon: itemState.value[index]?.icon,\n        ripple: props.ripple,\n        size: props.size,\n        variant: 'plain' as Variant,\n      }\n\n      return (\n        <>\n          <label\n            for={ id }\n            class={{\n              'v-rating__item--half': props.halfIncrements && value % 1 > 0,\n              'v-rating__item--full': props.halfIncrements && value % 1 === 0,\n            }}\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\n            onClick={ onClick }\n          >\n            <span class=\"v-rating__hidden\">{ t(props.itemAriaLabel, value, props.length) }</span>\n            {\n              !showStar ? undefined\n              : slots.item ? slots.item({\n                ...itemState.value[index],\n                props: btnProps,\n                value,\n                index,\n                rating: normalizedValue.value,\n              })\n              : (\n                <VBtn { ...btnProps } />\n              )\n            }\n          </label>\n\n          <input\n            class=\"v-rating__hidden\"\n            name={ name.value }\n            id={ id }\n            type=\"radio\"\n            value={ value }\n            checked={ normalizedValue.value === value }\n            tabindex={ -1 }\n            readonly={ props.readonly }\n            disabled={ props.disabled }\n          />\n        </>\n      )\n    }\n\n    function createLabel (labelProps: { value: number, index: number, label?: string }) {\n      if (slots['item-label']) return slots['item-label'](labelProps)\n\n      if (labelProps.label) return <span>{ labelProps.label }</span>\n\n      return <span>&nbsp;</span>\n    }\n\n    useRender(() => {\n      const hasLabels = !!props.itemLabels?.length || slots['item-label']\n\n      return (\n        <props.tag\n          class={[\n            'v-rating',\n            {\n              'v-rating--hover': props.hover,\n              'v-rating--readonly': props.readonly,\n            },\n            themeClasses.value,\n          ]}\n        >\n          <VRatingItem value={ 0 } index={ -1 } showStar={ false } />\n\n          { range.value.map((value, i) => (\n            <div class=\"v-rating__wrapper\">\n              {\n                hasLabels && props.itemLabelPosition === 'top'\n                  ? createLabel({ value, index: i, label: props.itemLabels?.[i] })\n                  : undefined\n              }\n              <div class=\"v-rating__item\">\n                { props.halfIncrements ? (\n                  <>\n                    <VRatingItem value={ value - 0.5 } index={ i * 2 } />\n                    <VRatingItem value={ value } index={ (i * 2) + 1 } />\n                  </>\n                ) : (\n                  <VRatingItem value={ value } index={ i } />\n                )}\n              </div>\n              {\n                hasLabels && props.itemLabelPosition === 'bottom'\n                  ? createLabel({ value, index: i, label: props.itemLabels?.[i] })\n                  : undefined\n              }\n            </div>\n          ))}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRating = InstanceType<typeof VRating>\n"],"mappings":"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"}
+{"version":3,"file":"VRating.mjs","names":["VBtn","IconValue","makeComponentProps","makeDensityProps","makeSizeProps","makeTagProps","makeThemeProps","provideTheme","useLocale","useProxiedModel","computed","ref","clamp","createRange","genericComponent","getUid","useRender","VRating","name","props","String","itemAriaLabel","type","default","activeColor","color","clearable","Boolean","disabled","emptyIcon","fullIcon","halfIncrements","hover","length","Number","readonly","modelValue","itemLabels","Array","itemLabelPosition","validator","v","includes","ripple","emits","value","setup","_ref","slots","t","themeClasses","rating","normalizedValue","parseFloat","range","increments","flatMap","hoverIndex","itemState","map","isHovering","isFilled","isHovered","isFullIcon","icon","eventState","onMouseenter","onMouseleave","onClick","undefined","VRatingItem","_ref2","index","showStar","id","replace","btnProps","density","size","variant","_createVNode","_Fragment","item","createLabel","labelProps","label","_createTextVNode","hasLabels","tag","class","style","i"],"sources":["../../../src/components/VRating/VRating.tsx"],"sourcesContent":["// Styles\nimport './VRating.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps } from '@/composables/density'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { clamp, createRange, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport type { Variant } from '@/composables/variant'\n\ntype VRatingItemSlot = {\n  value: number\n  index: number\n  isFilled: boolean\n  isHovered: boolean\n  icon: IconValue\n  color?: string\n  props: Record<string, unknown>\n  rating: number\n}\n\ntype VRatingItemLabelSlot = {\n  value: number\n  index: number\n  label?: string\n}\n\ntype VRatingSlots = {\n  item: [VRatingItemSlot]\n  'item-label': [VRatingItemLabelSlot]\n}\n\nexport const VRating = genericComponent<VRatingSlots>()({\n  name: 'VRating',\n\n  props: {\n    name: String,\n    itemAriaLabel: {\n      type: String,\n      default: '$vuetify.rating.ariaLabel.item',\n    },\n    activeColor: String,\n    color: String,\n    clearable: Boolean,\n    disabled: Boolean,\n    emptyIcon: {\n      type: IconValue,\n      default: '$ratingEmpty',\n    },\n    fullIcon: {\n      type: IconValue,\n      default: '$ratingFull',\n    },\n    halfIncrements: Boolean,\n    hover: Boolean,\n    length: {\n      type: [Number, String],\n      default: 5,\n    },\n    readonly: Boolean,\n    modelValue: {\n      type: [Number, String],\n      default: 0,\n    },\n    itemLabels: Array as Prop<string[]>,\n    itemLabelPosition: {\n      type: String,\n      default: 'top',\n      validator: (v: any) => ['top', 'bottom'].includes(v),\n    },\n    ripple: Boolean,\n\n    ...makeComponentProps(),\n    ...makeDensityProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: number | string) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { themeClasses } = provideTheme(props)\n    const rating = useProxiedModel(props, 'modelValue')\n    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length))\n\n    const range = computed(() => createRange(Number(props.length), 1))\n    const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]))\n    const hoverIndex = ref(-1)\n\n    const itemState = computed(() => increments.value.map(value => {\n      const isHovering = props.hover && hoverIndex.value > -1\n      const isFilled = normalizedValue.value >= value\n      const isHovered = hoverIndex.value >= value\n      const isFullIcon = isHovering ? isHovered : isFilled\n      const icon = isFullIcon ? props.fullIcon : props.emptyIcon\n      const activeColor = props.activeColor ?? props.color\n      const color = (isFilled || isHovered) ? activeColor : props.color\n\n      return { isFilled, isHovered, icon, color }\n    }))\n\n    const eventState = computed(() => [0, ...increments.value].map(value => {\n      function onMouseenter () {\n        hoverIndex.value = value\n      }\n\n      function onMouseleave () {\n        hoverIndex.value = -1\n      }\n\n      function onClick () {\n        if (props.disabled || props.readonly) return\n        rating.value = normalizedValue.value === value && props.clearable ? 0 : value\n      }\n\n      return {\n        onMouseenter: props.hover ? onMouseenter : undefined,\n        onMouseleave: props.hover ? onMouseleave : undefined,\n        onClick,\n      }\n    }))\n\n    const name = computed(() => props.name ?? `v-rating-${getUid()}`)\n\n    function VRatingItem ({ value, index, showStar = true }: { value: number, index: number, showStar?: boolean }) {\n      const { onMouseenter, onMouseleave, onClick } = eventState.value[index + 1]\n      const id = `${name.value}-${String(value).replace('.', '-')}`\n      const btnProps = {\n        color: itemState.value[index]?.color,\n        density: props.density,\n        disabled: props.disabled,\n        icon: itemState.value[index]?.icon,\n        ripple: props.ripple,\n        size: props.size,\n        variant: 'plain' as Variant,\n      }\n\n      return (\n        <>\n          <label\n            for={ id }\n            class={{\n              'v-rating__item--half': props.halfIncrements && value % 1 > 0,\n              'v-rating__item--full': props.halfIncrements && value % 1 === 0,\n            }}\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\n            onClick={ onClick }\n          >\n            <span class=\"v-rating__hidden\">{ t(props.itemAriaLabel, value, props.length) }</span>\n            {\n              !showStar ? undefined\n              : slots.item ? slots.item({\n                ...itemState.value[index],\n                props: btnProps,\n                value,\n                index,\n                rating: normalizedValue.value,\n              })\n              : (\n                <VBtn { ...btnProps } />\n              )\n            }\n          </label>\n\n          <input\n            class=\"v-rating__hidden\"\n            name={ name.value }\n            id={ id }\n            type=\"radio\"\n            value={ value }\n            checked={ normalizedValue.value === value }\n            tabindex={ -1 }\n            readonly={ props.readonly }\n            disabled={ props.disabled }\n          />\n        </>\n      )\n    }\n\n    function createLabel (labelProps: { value: number, index: number, label?: string }) {\n      if (slots['item-label']) return slots['item-label'](labelProps)\n\n      if (labelProps.label) return <span>{ labelProps.label }</span>\n\n      return <span>&nbsp;</span>\n    }\n\n    useRender(() => {\n      const hasLabels = !!props.itemLabels?.length || slots['item-label']\n\n      return (\n        <props.tag\n          class={[\n            'v-rating',\n            {\n              'v-rating--hover': props.hover,\n              'v-rating--readonly': props.readonly,\n            },\n            themeClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n        >\n          <VRatingItem value={ 0 } index={ -1 } showStar={ false } />\n\n          { range.value.map((value, i) => (\n            <div class=\"v-rating__wrapper\">\n              {\n                hasLabels && props.itemLabelPosition === 'top'\n                  ? createLabel({ value, index: i, label: props.itemLabels?.[i] })\n                  : undefined\n              }\n              <div class=\"v-rating__item\">\n                { props.halfIncrements ? (\n                  <>\n                    <VRatingItem value={ value - 0.5 } index={ i * 2 } />\n                    <VRatingItem value={ value } index={ (i * 2) + 1 } />\n                  </>\n                ) : (\n                  <VRatingItem value={ value } index={ i } />\n                )}\n              </div>\n              {\n                hasLabels && props.itemLabelPosition === 'bottom'\n                  ? createLabel({ value, index: i, label: props.itemLabels?.[i] })\n                  : undefined\n              }\n            </div>\n          ))}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VRating = InstanceType<typeof VRating>\n"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 
 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 VRatingItemSlot = {
@@ -31,6 +31,7 @@ declare const VRating: {
         $data: {};
         $props: Partial<{
             length: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             readonly: boolean;
@@ -47,6 +48,7 @@ declare const VRating: {
             itemLabelPosition: string;
         }> & Omit<{
             length: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             readonly: boolean;
@@ -64,6 +66,7 @@ declare const VRating: {
         } & {
             name?: string | undefined;
             color?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             activeColor?: string | undefined;
             itemLabels?: string[] | undefined;
@@ -72,10 +75,6 @@ declare const VRating: {
                 item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
-                'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 item?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
@@ -85,7 +84,7 @@ declare const VRating: {
             "v-slot:item-label"?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "length" | "disabled" | "size" | "readonly" | "tag" | "density" | "modelValue" | "ripple" | "clearable" | "hover" | "halfIncrements" | "itemAriaLabel" | "emptyIcon" | "fullIcon" | "itemLabelPosition">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "length" | "style" | "disabled" | "size" | "readonly" | "tag" | "density" | "modelValue" | "ripple" | "clearable" | "hover" | "halfIncrements" | "itemAriaLabel" | "emptyIcon" | "fullIcon" | "itemLabelPosition">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -101,6 +100,7 @@ declare const VRating: {
         $el: any;
         $options: vue.ComponentOptionsBase<{
             length: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             readonly: boolean;
@@ -118,6 +118,7 @@ declare const VRating: {
         } & {
             name?: string | undefined;
             color?: string | undefined;
+            class?: any;
             theme?: string | undefined;
             activeColor?: string | undefined;
             itemLabels?: string[] | undefined;
@@ -126,10 +127,6 @@ declare const VRating: {
                 item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
-                'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 item?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
                 'item-label'?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
@@ -143,6 +140,7 @@ declare const VRating: {
             'update:modelValue': (value: number | string) => boolean;
         }, string, {
             length: string | number;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             readonly: boolean;
@@ -179,6 +177,7 @@ declare const VRating: {
         $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;
     } & {
         length: string | number;
+        style: vue.StyleValue;
         disabled: boolean;
         size: string | number;
         readonly: boolean;
@@ -196,6 +195,7 @@ declare const VRating: {
     } & {
         name?: string | undefined;
         color?: string | undefined;
+        class?: any;
         theme?: string | undefined;
         activeColor?: string | undefined;
         itemLabels?: string[] | undefined;
@@ -204,10 +204,6 @@ declare const VRating: {
             item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
             'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
-            'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             item?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
             'item-label'?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
@@ -223,6 +219,7 @@ declare const VRating: {
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
     length: string | number;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     readonly: boolean;
@@ -240,6 +237,7 @@ declare const VRating: {
 } & {
     name?: string | undefined;
     color?: string | undefined;
+    class?: any;
     theme?: string | undefined;
     activeColor?: string | undefined;
     itemLabels?: string[] | undefined;
@@ -248,10 +246,6 @@ declare const VRating: {
         item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
         'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        item?: ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
-        'item-label'?: ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         item?: false | ((args_0: VRatingItemSlot) => vue.VNodeChild) | undefined;
         'item-label'?: false | ((args_0: VRatingItemLabelSlot) => vue.VNodeChild) | undefined;
@@ -265,6 +259,7 @@ declare const VRating: {
     'update:modelValue': (value: number | string) => boolean;
 }, string, {
     length: string | number;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     readonly: boolean;
@@ -294,6 +289,11 @@ declare const VRating: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     name: StringConstructor;
     itemAriaLabel: {
         type: StringConstructor;
@@ -344,6 +344,11 @@ declare const VRating: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     name: StringConstructor;
     itemAriaLabel: {
         type: StringConstructor;

package/lib/components/VResponsive/VResponsive.css

@@ -1,23 +1,31 @@
 .v-responsive {
-  display: flex;
+  display: grid;
+  grid-template-rows: minmax(100%, 1fr);
+  grid-template-columns: 1fr;
   flex: 1 0 auto;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
   position: relative;
 }
+.v-responsive--inline {
+  display: inline-grid;
+  flex: 0 0 auto;
+}
 
 .v-responsive__content {
   flex: 1 0 0px;
   max-width: 100%;
 }
 
-.v-responsive__sizer ~ .v-responsive__content {
-  margin-inline-start: -100%;
-}
-
 .v-responsive__sizer {
   flex: 1 0 0px;
   transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+}
+
+.v-responsive__sizer,
+.v-responsive__content {
+  grid-row-start: 1;
+  grid-column-start: 1;
 }

package/lib/components/VResponsive/VResponsive.mjs

@@ -3,9 +3,10 @@ import { createVNode as _createVNode } from "vue";
 import "./VResponsive.css";
 
 // Composables
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
 import { computed } from 'vue';
-import { genericComponent, useRender } from "../../util/index.mjs";
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export function useAspectStyles(props) {
   return {
     aspectStyles: computed(() => {
@@ -16,13 +17,16 @@ export function useAspectStyles(props) {
     })
   };
 }
+export const makeVResponsiveProps = propsFactory({
+  aspectRatio: [String, Number],
+  contentClass: String,
+  inline: Boolean,
+  ...makeComponentProps(),
+  ...makeDimensionProps()
+}, 'v-responsive');
 export const VResponsive = genericComponent()({
   name: 'VResponsive',
-  props: {
-    aspectRatio: [String, Number],
-    contentClass: String,
-    ...makeDimensionProps()
-  },
+  props: makeVResponsiveProps(),
   setup(props, _ref) {
     let {
       slots
@@ -34,8 +38,10 @@ export const VResponsive = genericComponent()({
       dimensionStyles
     } = useDimension(props);
     useRender(() => _createVNode("div", {
-      "class": "v-responsive",
-      "style": dimensionStyles.value
+      "class": ['v-responsive', {
+        'v-responsive--inline': props.inline
+      }, props.class],
+      "style": [dimensionStyles.value, props.style]
     }, [_createVNode("div", {
       "class": "v-responsive__sizer",
       "style": aspectStyles.value

package/lib/components/VResponsive/VResponsive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VResponsive.mjs","names":["makeDimensionProps","useDimension","computed","genericComponent","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","VResponsive","name","contentClass","setup","_ref","slots","dimensionStyles","_createVNode","value","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: {\n    aspectRatio: [String, Number],\n    contentClass: String,\n\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div class=\"v-responsive\" style={ dimensionStyles.value }>\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,SAAS;AAOpC,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEL,QAAQ,CAAC,MAAM;MAC3B,MAAMM,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,WAAW,GAAGX,gBAAgB,EAAoB,CAAC;EAC9DY,IAAI,EAAE,aAAa;EAEnBT,KAAK,EAAE;IACLI,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;IAC7BO,YAAY,EAAEJ,MAAM;IAEpB,GAAGZ,kBAAkB;EACvB,CAAC;EAEDiB,KAAKA,CAAEX,KAAK,EAAAY,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEX;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEc;IAAgB,CAAC,GAAGnB,YAAY,CAACK,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAiB,YAAA;MAAA,SACG,cAAc;MAAA,SAASD,eAAe,CAACE;IAAK,IAAAD,YAAA;MAAA,SAC1C,qBAAqB;MAAA,SAASd,YAAY,CAACe;IAAK,UAEzDH,KAAK,CAACI,UAAU,IAAI,EAEpBJ,KAAK,CAACK,OAAO,IAAAH,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAEf,KAAK,CAACU,YAAY;IAAC,IAAIG,KAAK,CAACK,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","inline","Boolean","VResponsive","name","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: []\n  additional: []\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n  aspectRatio: [String, Number],\n  contentClass: String,\n  inline: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'v-responsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: makeVResponsiveProps(),\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          { 'v-responsive--inline': props.inline },\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAEH,MAAM;EACpBI,MAAM,EAAEC,OAAO;EAEf,GAAGnB,kBAAkB,EAAE;EACvB,GAAGC,kBAAkB;AACvB,CAAC,EAAE,cAAc,CAAC;AAElB,OAAO,MAAMmB,WAAW,GAAGhB,gBAAgB,EAAoB,CAAC;EAC9DiB,IAAI,EAAE,aAAa;EAEnBb,KAAK,EAAEQ,oBAAoB,EAAE;EAE7BM,KAAKA,CAAEd,KAAK,EAAAe,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEd;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEiB;IAAgB,CAAC,GAAGvB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAoB,YAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAElB,KAAK,CAACU;MAAO,CAAC,EACxCV,KAAK,CAACmB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBpB,KAAK,CAACqB,KAAK;IACZ,IAAAH,YAAA;MAAA,SAEU,qBAAqB;MAAA,SAASjB,YAAY,CAACmB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,IAAI,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAElB,KAAK,CAACS,YAAY;IAAC,IAAIO,KAAK,CAACO,OAAO,EAAE,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}