@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VRating/VRating.css

@@ -33,7 +33,7 @@
   transition: inherit;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.v-rating--hover .v-rating__item:hover:not(.v-rating__item--focused) .v-icon {
+.v-rating--hover .v-rating__item:hover:not(.v-rating__item--focused) .v-btn {
   transform: scale(1.25);
 }
 .v-rating__item--focused .v-btn__overlay {
@@ -43,7 +43,7 @@
 .v-rating__item--half {
   overflow: hidden;
   position: absolute;
-  width: 50%;
+  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
   z-index: 1;
 }
 .v-rating__item--half .v-btn__overlay, .v-rating__item--half:hover .v-btn__overlay {

package/lib/components/VRating/VRating.mjs

@@ -4,15 +4,16 @@ import "./VRating.css"; // Components
 
 import { VBtn } from "../VBtn/index.mjs"; // Composables
 
+import { IconValue } from "../../composables/icons.mjs";
 import { makeDensityProps } from "../../composables/density.mjs";
 import { makeSizeProps } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useLocale } from "../../composables/locale.mjs"; // Utilities
+import { useLocale } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
 import { computed, ref } from 'vue';
-import { createRange, genericComponent, getUid } from "../../util/index.mjs"; // Types
+import { createRange, genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
 
 export const VRating = genericComponent()({
   name: 'VRating',
@@ -27,11 +28,11 @@ export const VRating = genericComponent()({
     clearable: Boolean,
     disabled: Boolean,
     emptyIcon: {
-      type: String,
+      type: IconValue,
       default: '$ratingEmpty'
     },
     fullIcon: {
-      type: String,
+      type: IconValue,
       default: '$ratingFull'
     },
     halfIncrements: Boolean,
@@ -79,14 +80,12 @@ export const VRating = genericComponent()({
     const firstRef = ref();
     let isClicking = false;
     const itemState = computed(() => increments.value.map(value => {
-      var _props$activeColor;
-
       const isHovering = props.hover && hoverIndex.value > -1;
       const isFilled = rating.value >= value;
       const isHovered = hoverIndex.value >= value;
       const isFullIcon = isHovering ? isHovered : isFilled;
       const icon = isFullIcon ? props.fullIcon : props.emptyIcon;
-      const activeColor = (_props$activeColor = props.activeColor) != null ? _props$activeColor : props.color;
+      const activeColor = props.activeColor ?? props.color;
       const color = isFilled || isHovered ? activeColor : props.color;
       return {
         isFilled,
@@ -140,11 +139,7 @@ export const VRating = genericComponent()({
       isClicking = false;
     }
 
-    const name = computed(() => {
-      var _props$name;
-
-      return (_props$name = props.name) != null ? _props$name : `v-rating-${getUid()}`;
-    });
+    const name = computed(() => props.name ?? `v-rating-${getUid()}`);
 
     function VRatingItem(_ref2) {
       var _itemState$value$inde, _itemState$value$inde2;
@@ -204,7 +199,13 @@ export const VRating = genericComponent()({
       }, null)]);
     }
 
-    return () => {
+    function createLabel(labelProps) {
+      if (slots['item-label']) return slots['item-label'](labelProps);
+      if (labelProps.label) return _createVNode("span", null, [labelProps.label]);
+      return _createVNode("span", null, [_createTextVNode("\xA0")]);
+    }
+
+    useRender(() => {
       var _props$itemLabels;
 
       const hasLabels = !!((_props$itemLabels = props.itemLabels) != null && _props$itemLabels.length) || slots['item-label'];
@@ -223,11 +224,11 @@ export const VRating = genericComponent()({
 
           return _createVNode("div", {
             "class": "v-rating__wrapper"
-          }, [!hasLabels ? undefined : slots['item-label'] ? slots['item-label']({
+          }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
             value,
             index: i,
             label: (_props$itemLabels2 = props.itemLabels) == null ? void 0 : _props$itemLabels2[i]
-          }) : (_props$itemLabels3 = props.itemLabels) != null && _props$itemLabels3[i] ? _createVNode("span", null, [props.itemLabels[i]]) : _createVNode("span", null, [_createTextVNode("\xA0")]), _createVNode("div", {
+          }) : undefined, _createVNode("div", {
             "class": ['v-rating__item', {
               'v-rating__item--focused': Math.ceil(focusIndex.value) === value
             }]
@@ -240,10 +241,15 @@ export const VRating = genericComponent()({
           }, null)]) : _createVNode(VRatingItem, {
             "value": value,
             "index": i
-          }, null)])]);
+          }, null)]), hasLabels && props.itemLabelPosition === 'bottom' ? createLabel({
+            value,
+            index: i,
+            label: (_props$itemLabels3 = props.itemLabels) == null ? void 0 : _props$itemLabels3[i]
+          }) : undefined]);
         })]
       });
-    };
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VRating/VRating.tsx"],"names":["VBtn","makeDensityProps","makeSizeProps","makeTagProps","useProxiedModel","makeThemeProps","provideTheme","useLocale","computed","ref","createRange","genericComponent","getUid","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","slots","t","themeClasses","rating","range","increments","flatMap","hoverIndex","focusIndex","firstRef","isClicking","itemState","map","isHovering","isFilled","isHovered","isFullIcon","icon","eventState","onMouseenter","onMouseleave","onFocus","focus","onBlur","onClick","undefined","onMousedown","onMouseup","VRatingItem","index","showStar","id","replace","btnProps","density","size","tag","variant","item","hasLabels","i","label","Math","ceil"],"mappings":"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","sourcesContent":["// Styles\nimport './VRating.sass'\n\n// Components\nimport { VBtn } from '../VBtn'\n\n// Composables\nimport { makeDensityProps } from '@/composables/density'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { createRange, genericComponent, getUid } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport type { MakeSlots } from '@/util'\nimport type { Variant } from '@/composables/variant'\n\ntype VRatingItemSlot = {\n  value: number\n  index: number\n  isFilled: boolean\n  isHovered: boolean\n  icon: string\n  color?: string\n  props: Record<string, unknown>\n}\n\ntype VRatingItemLabelSlot = {\n  value: number\n  index: number\n  label?: string\n}\n\nexport const VRating = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    item: [VRatingItemSlot]\n    'item-label': [VRatingItemLabelSlot]\n  }>\n}>()({\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: String,\n      default: '$ratingEmpty',\n    },\n    fullIcon: {\n      type: String,\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,\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) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { themeClasses } = provideTheme(props)\n    const rating = useProxiedModel(props, 'modelValue')\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    const focusIndex = ref(-1)\n    const firstRef = ref<HTMLElement>()\n    let isClicking = false\n\n    const itemState = computed(() => increments.value.map(value => {\n      const isHovering = props.hover && hoverIndex.value > -1\n      const isFilled = rating.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 onFocus () {\n        if (value === 0 && rating.value === 0) {\n          firstRef.value?.focus()\n        } else {\n          focusIndex.value = value\n        }\n      }\n\n      function onBlur () {\n        if (!isClicking) focusIndex.value = -1\n      }\n\n      function onClick () {\n        if (props.disabled || props.readonly) return\n        rating.value = rating.value === value && props.clearable ? 0 : value\n      }\n\n      return {\n        onMouseenter: props.hover ? onMouseenter : undefined,\n        onMouseleave: props.hover ? onMouseleave : undefined,\n        onFocus,\n        onBlur,\n        onClick,\n      }\n    }))\n\n    function onMousedown () {\n      isClicking = true\n    }\n\n    function onMouseup () {\n      isClicking = false\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, onFocus, onBlur, 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        tag: 'span',\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            onMousedown={ onMousedown }\n            onMouseup={ onMouseup }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\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              })\n              : (\n                <VBtn { ...btnProps } />\n              )\n            }\n          </label>\n          <input\n            class=\"v-rating__hidden\"\n            name={ name.value }\n            id={ id }\n            type=\"radio\"\n            value={ value }\n            checked={ rating.value === value }\n            onClick={ onClick }\n            onFocus={ onFocus }\n            onBlur={ onBlur }\n            ref={ index === 0 ? firstRef : undefined }\n            readonly={ props.readonly }\n            disabled={ props.disabled }\n          />\n        </>\n      )\n    }\n\n    return () => {\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 ? undefined\n                : slots['item-label'] ? slots['item-label']({ value, index: i, label: props.itemLabels?.[i] })\n                : props.itemLabels?.[i] ? <span>{ props.itemLabels[i] }</span>\n                : <span>&nbsp;</span>\n              }\n              <div\n                class={[\n                  'v-rating__item',\n                  {\n                    'v-rating__item--focused': Math.ceil(focusIndex.value) === value,\n                  },\n                ]}\n              >\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            </div>\n          )) }\n        </props.tag>\n      )\n    }\n  },\n})\n\nexport type VRating = InstanceType<typeof VRating>\n"],"file":"VRating.mjs"}
+{"version":3,"file":"VRating.mjs","names":["VBtn","IconValue","makeDensityProps","makeSizeProps","makeTagProps","makeThemeProps","provideTheme","useLocale","useProxiedModel","computed","ref","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","slots","t","themeClasses","rating","range","increments","flatMap","hoverIndex","focusIndex","firstRef","isClicking","itemState","map","isHovering","isFilled","isHovered","isFullIcon","icon","eventState","onMouseenter","onMouseleave","onFocus","focus","onBlur","onClick","undefined","onMousedown","onMouseup","VRatingItem","index","showStar","id","replace","btnProps","density","size","tag","variant","item","createLabel","labelProps","label","hasLabels","i","Math","ceil"],"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 { createRange, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\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}\n\ntype VRatingItemLabelSlot = {\n  value: number\n  index: number\n  label?: string\n}\n\nexport const VRating = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    item: [VRatingItemSlot]\n    'item-label': [VRatingItemLabelSlot]\n  }>\n}>()({\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,\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) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const { themeClasses } = provideTheme(props)\n    const rating = useProxiedModel(props, 'modelValue')\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    const focusIndex = ref(-1)\n    const firstRef = ref<HTMLElement>()\n    let isClicking = false\n\n    const itemState = computed(() => increments.value.map(value => {\n      const isHovering = props.hover && hoverIndex.value > -1\n      const isFilled = rating.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 onFocus () {\n        if (value === 0 && rating.value === 0) {\n          firstRef.value?.focus()\n        } else {\n          focusIndex.value = value\n        }\n      }\n\n      function onBlur () {\n        if (!isClicking) focusIndex.value = -1\n      }\n\n      function onClick () {\n        if (props.disabled || props.readonly) return\n        rating.value = rating.value === value && props.clearable ? 0 : value\n      }\n\n      return {\n        onMouseenter: props.hover ? onMouseenter : undefined,\n        onMouseleave: props.hover ? onMouseleave : undefined,\n        onFocus,\n        onBlur,\n        onClick,\n      }\n    }))\n\n    function onMousedown () {\n      isClicking = true\n    }\n\n    function onMouseup () {\n      isClicking = false\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, onFocus, onBlur, 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        tag: 'span',\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            onMousedown={ onMousedown }\n            onMouseup={ onMouseup }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\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              })\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={ rating.value === value }\n            onClick={ onClick }\n            onFocus={ onFocus }\n            onBlur={ onBlur }\n            ref={ index === 0 ? firstRef : undefined }\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\n                class={[\n                  'v-rating__item',\n                  {\n                    'v-rating__item--focused': Math.ceil(focusIndex.value) === value,\n                  },\n                ]}\n              >\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/VRating.sass

@@ -1,6 +1,6 @@
-@forward './variables'
 @use './variables' as *
 
+// Block
 .v-rating
   max-width: 100%
   display: inline-flex
@@ -9,6 +9,7 @@
   &--readonly
     pointer-events: none
 
+// Element
 .v-rating__wrapper
   align-items: $rating-item-align-items
   display: inline-flex
@@ -36,7 +37,7 @@
 
   &:hover:not(.v-rating__item--focused)
     .v-rating--hover &
-      .v-icon
+      .v-btn
         transform: $rating-item-icon-transform
 
   &--focused
@@ -47,7 +48,7 @@
   &--half
     overflow: hidden
     position: absolute
-    width: 50%
+    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
     z-index: 1
 
     .v-btn__overlay,

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

@@ -0,0 +1,356 @@
+import * as vue from 'vue';
+import { VNodeChild, JSXComponent, PropType, Prop } from 'vue';
+
+declare type SlotsToProps<T extends Record<string, Slot>> = {
+    $children: () => (T['default'] | VNodeChild | {
+        [K in keyof T]?: T[K];
+    });
+    'v-slots': new () => {
+        [K in keyof T]?: T[K] | false;
+    };
+};
+declare type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild;
+declare type MakeSlots<T extends Record<string, any[]>> = {
+    [K in keyof T]?: Slot<T[K]>;
+};
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare type VRatingItemSlot = {
+    value: number;
+    index: number;
+    isFilled: boolean;
+    isHovered: boolean;
+    icon: IconValue;
+    color?: string;
+    props: Record<string, unknown>;
+};
+declare type VRatingItemLabelSlot = {
+    value: number;
+    index: number;
+    label?: string;
+};
+declare const VRating: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            length: string | number;
+            disabled: boolean;
+            size: string | number;
+            readonly: boolean;
+            tag: string;
+            density: "default" | "compact" | "comfortable" | null;
+            modelValue: number;
+            ripple: boolean;
+            clearable: boolean;
+            hover: boolean;
+            halfIncrements: boolean;
+            itemAriaLabel: string;
+            emptyIcon: IconValue;
+            fullIcon: IconValue;
+            itemLabelPosition: string;
+        }> & Omit<Readonly<vue.ExtractPropTypes<{
+            theme: StringConstructor;
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            density: {
+                type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            name: StringConstructor;
+            itemAriaLabel: {
+                type: StringConstructor;
+                default: string;
+            };
+            activeColor: StringConstructor;
+            color: StringConstructor;
+            clearable: BooleanConstructor;
+            disabled: BooleanConstructor;
+            emptyIcon: {
+                type: vue.PropType<IconValue>;
+                default: string;
+            };
+            fullIcon: {
+                type: vue.PropType<IconValue>;
+                default: string;
+            };
+            halfIncrements: BooleanConstructor;
+            hover: BooleanConstructor;
+            length: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            readonly: BooleanConstructor;
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            itemLabels: Prop<string[], string[]>;
+            itemLabelPosition: {
+                type: StringConstructor;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            ripple: BooleanConstructor;
+        } & SlotsToProps<MakeSlots<{
+            item: [VRatingItemSlot];
+            'item-label': [VRatingItemLabelSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "length" | "disabled" | "size" | "readonly" | "tag" | "density" | "modelValue" | "ripple" | "clearable" | "hover" | "halfIncrements" | "itemAriaLabel" | "emptyIcon" | "fullIcon" | "itemLabelPosition">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: "update:modelValue", value: number) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+            theme: StringConstructor;
+            tag: {
+                type: StringConstructor;
+                default: string;
+            };
+            size: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: string;
+            };
+            density: {
+                type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            name: StringConstructor;
+            itemAriaLabel: {
+                type: StringConstructor;
+                default: string;
+            };
+            activeColor: StringConstructor;
+            color: StringConstructor;
+            clearable: BooleanConstructor;
+            disabled: BooleanConstructor;
+            emptyIcon: {
+                type: vue.PropType<IconValue>;
+                default: string;
+            };
+            fullIcon: {
+                type: vue.PropType<IconValue>;
+                default: string;
+            };
+            halfIncrements: BooleanConstructor;
+            hover: BooleanConstructor;
+            length: {
+                type: (StringConstructor | NumberConstructor)[];
+                default: number;
+            };
+            readonly: BooleanConstructor;
+            modelValue: {
+                type: NumberConstructor;
+                default: number;
+            };
+            itemLabels: Prop<string[], string[]>;
+            itemLabelPosition: {
+                type: StringConstructor;
+                default: string;
+                validator: (v: any) => boolean;
+            };
+            ripple: BooleanConstructor;
+        } & SlotsToProps<MakeSlots<{
+            item: [VRatingItemSlot];
+            'item-label': [VRatingItemLabelSlot];
+        }>>>> & {
+            "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'update:modelValue': (value: number) => boolean;
+        }, string, {
+            length: string | number;
+            disabled: boolean;
+            size: string | number;
+            readonly: boolean;
+            tag: string;
+            density: "default" | "compact" | "comfortable" | null;
+            modelValue: number;
+            ripple: boolean;
+            clearable: boolean;
+            hover: boolean;
+            halfIncrements: boolean;
+            itemAriaLabel: string;
+            emptyIcon: IconValue;
+            fullIcon: IconValue;
+            itemLabelPosition: string;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof vue.nextTick;
+        $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & Readonly<vue.ExtractPropTypes<{
+        theme: StringConstructor;
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: string;
+        };
+        density: {
+            type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        name: StringConstructor;
+        itemAriaLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        activeColor: StringConstructor;
+        color: StringConstructor;
+        clearable: BooleanConstructor;
+        disabled: BooleanConstructor;
+        emptyIcon: {
+            type: vue.PropType<IconValue>;
+            default: string;
+        };
+        fullIcon: {
+            type: vue.PropType<IconValue>;
+            default: string;
+        };
+        halfIncrements: BooleanConstructor;
+        hover: BooleanConstructor;
+        length: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        readonly: BooleanConstructor;
+        modelValue: {
+            type: NumberConstructor;
+            default: number;
+        };
+        itemLabels: Prop<string[], string[]>;
+        itemLabelPosition: {
+            type: StringConstructor;
+            default: string;
+            validator: (v: any) => boolean;
+        };
+        ripple: BooleanConstructor;
+    } & SlotsToProps<MakeSlots<{
+        item: [VRatingItemSlot];
+        'item-label': [VRatingItemLabelSlot];
+    }>>>> & {
+        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    density: {
+        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    name: StringConstructor;
+    itemAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeColor: StringConstructor;
+    color: StringConstructor;
+    clearable: BooleanConstructor;
+    disabled: BooleanConstructor;
+    emptyIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    fullIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    halfIncrements: BooleanConstructor;
+    hover: BooleanConstructor;
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    readonly: BooleanConstructor;
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemLabels: Prop<string[], string[]>;
+    itemLabelPosition: {
+        type: StringConstructor;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    ripple: BooleanConstructor;
+} & SlotsToProps<MakeSlots<{
+    item: [VRatingItemSlot];
+    'item-label': [VRatingItemLabelSlot];
+}>>>> & {
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: number) => boolean;
+}, string, {
+    length: string | number;
+    disabled: boolean;
+    size: string | number;
+    readonly: boolean;
+    tag: string;
+    density: "default" | "compact" | "comfortable" | null;
+    modelValue: number;
+    ripple: boolean;
+    clearable: boolean;
+    hover: boolean;
+    halfIncrements: boolean;
+    itemAriaLabel: string;
+    emptyIcon: IconValue;
+    fullIcon: IconValue;
+    itemLabelPosition: string;
+}> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
+    $slots: MakeSlots<{
+        item: [VRatingItemSlot];
+        'item-label': [VRatingItemLabelSlot];
+    }>;
+});
+declare type VRating = InstanceType<typeof VRating>;
+
+export { VRating };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VRating/index.ts"],"names":["VRating"],"mappings":"SAASA,O","sourcesContent":["export { VRating } from './VRating'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VRating"],"sources":["../../../src/components/VRating/index.ts"],"sourcesContent":["export { VRating } from './VRating'\n"],"mappings":"SAASA,O"}

package/lib/components/VResponsive/VResponsive.mjs

@@ -5,7 +5,7 @@ import "./VResponsive.css"; // Composables
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
 
 import { computed } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export function useAspectStyles(props) {
   return {
     aspectStyles: computed(() => {
@@ -28,13 +28,13 @@ export const VResponsive = defineComponent({
     let {
       slots
     } = _ref;
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       aspectStyles
     } = useAspectStyles(props);
-    return () => {
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    useRender(() => {
       var _slots$additional;
 
       return _createVNode("div", {
@@ -46,7 +46,8 @@ export const VResponsive = defineComponent({
       }, null), (_slots$additional = slots.additional) == null ? void 0 : _slots$additional.call(slots), slots.default && _createVNode("div", {
         "class": ['v-responsive__content', props.contentClass]
       }, [slots.default()])]);
-    };
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"names":["makeDimensionProps","useDimension","computed","defineComponent","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","VResponsive","name","contentClass","setup","slots","dimensionStyles","value","additional","default"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,kB,EAAoBC,Y,4CAE7B;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e;AAET,OAAO,SAASC,eAAT,CAA0BC,KAA1B,EAAoE;AACzE,SAAO;AACLC,IAAAA,YAAY,EAAEJ,QAAQ,CAAC,MAAM;AAC3B,YAAMK,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAP,CAApB;AAEA,aAAOF,KAAK,GACR;AAAEG,QAAAA,aAAa,EAAEC,MAAM,CAAC,IAAIJ,KAAJ,GAAY,GAAb,CAAN,GAA0B;AAA3C,OADQ,GAERK,SAFJ;AAGD,KANqB;AADjB,GAAP;AASD;AAED,OAAO,MAAMC,WAAW,GAAGV,eAAe,CAAC;AACzCW,EAAAA,IAAI,EAAE,aADmC;AAGzCT,EAAAA,KAAK,EAAE;AACLI,IAAAA,WAAW,EAAE,CAACE,MAAD,EAASH,MAAT,CADR;AAELO,IAAAA,YAAY,EAAEJ,MAFT;AAIL,OAAGX,kBAAkB;AAJhB,GAHkC;;AAUzCgB,EAAAA,KAAK,CAAEX,KAAF,QAAoB;AAAA,QAAX;AAAEY,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAsBjB,YAAY,CAACI,KAAD,CAAxC;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAmBF,eAAe,CAACC,KAAD,CAAxC;AAEA,WAAO;AAAA;;AAAA;AAAA,iBACM,cADN;AAAA,iBAC6Ba,eAAe,CAACC;AAD7C;AAAA,iBAEQ,qBAFR;AAAA,iBAEsCb,YAAY,CAACa;AAFnD,qCAGDF,KAAK,CAACG,UAHL,qBAGD,uBAAAH,KAAK,CAHJ,EAIDA,KAAK,CAACI,OAAN;AAAA,iBACY,CAAC,uBAAD,EAA0BhB,KAAK,CAACU,YAAhC;AADZ,UAC6DE,KAAK,CAACI,OAAN,EAD7D,EAJC;AAAA,KAAP;AASD;;AAvBwC,CAAD,CAAnC","sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\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 = defineComponent({\n  name: 'VResponsive',\n\n  props: {\n    aspectRatio: [String, Number],\n    contentClass: String,\n\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n    const { aspectStyles } = useAspectStyles(props)\n\n    return () => (\n      <div class=\"v-responsive\" style={ dimensionStyles.value }>\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n        { slots.additional?.() }\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    )\n  },\n})\n"],"file":"VResponsive.mjs"}
+{"version":3,"file":"VResponsive.mjs","names":["makeDimensionProps","useDimension","computed","defineComponent","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","VResponsive","name","contentClass","setup","slots","dimensionStyles","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 { defineComponent, useRender } from '@/util'\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 = defineComponent({\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"],"mappings":";AAAA;AACA,2B,CAEA;;SACSA,kB,EAAoBC,Y,4CAE7B;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e,EAAiBC,S;AAE1B,OAAO,SAASC,eAAT,CAA0BC,KAA1B,EAAoE;EACzE,OAAO;IACLC,YAAY,EAAEL,QAAQ,CAAC,MAAM;MAC3B,MAAMM,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAP,CAApB;MAEA,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,IAAIJ,KAAJ,GAAY,GAAb,CAAN,GAA0B;MAA3C,CADQ,GAERK,SAFJ;IAGD,CANqB;EADjB,CAAP;AASD;AAED,OAAO,MAAMC,WAAW,GAAGX,eAAe,CAAC;EACzCY,IAAI,EAAE,aADmC;EAGzCT,KAAK,EAAE;IACLI,WAAW,EAAE,CAACE,MAAD,EAASH,MAAT,CADR;IAELO,YAAY,EAAEJ,MAFT;IAIL,GAAGZ,kBAAkB;EAJhB,CAHkC;;EAUzCiB,KAAK,CAAEX,KAAF,QAAoB;IAAA,IAAX;MAAEY;IAAF,CAAW;IACvB,MAAM;MAAEX;IAAF,IAAmBF,eAAe,CAACC,KAAD,CAAxC;IACA,MAAM;MAAEa;IAAF,IAAsBlB,YAAY,CAACK,KAAD,CAAxC;IAEAF,SAAS,CAAC;MAAA;;MAAA;QAAA,SACG,cADH;QAAA,SAC0Be,eAAe,CAACC;MAD1C;QAAA,SAEK,qBAFL;QAAA,SAEmCb,YAAY,CAACa;MAFhD,+BAIJF,KAAK,CAACG,UAJF,qBAIJ,uBAAAH,KAAK,CAJD,EAMJA,KAAK,CAACI,OAAN;QAAA,SACY,CAAC,uBAAD,EAA0BhB,KAAK,CAACU,YAAhC;MADZ,IAC6DE,KAAK,CAACI,OAAN,EAD7D,EANI;IAAA,CAAD,CAAT;IAYA,OAAO,EAAP;EACD;;AA3BwC,CAAD,CAAnC"}