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

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

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

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

@@ -7,6 +7,8 @@ declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
 declare type IconValue = string | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
+declare type Density = null | 'default' | 'comfortable' | 'compact';
+
 declare type ValidationResult = string | boolean;
 declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
@@ -93,7 +95,7 @@ declare const VRangeSlider: vue.DefineComponent<{
     };
     validationValue: null;
     density: {
-        type: PropType<"default" | "compact" | "comfortable" | null>;
+        type: PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
@@ -194,7 +196,7 @@ declare const VRangeSlider: vue.DefineComponent<{
     };
     validationValue: null;
     density: {
-        type: PropType<"default" | "compact" | "comfortable" | null>;
+        type: PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
@@ -225,7 +227,7 @@ declare const VRangeSlider: vue.DefineComponent<{
     elevation: string | number;
     messages: string | string[];
     rounded: string | number | boolean;
-    density: "default" | "compact" | "comfortable" | null;
+    density: Density;
     modelValue: number[];
     errorMessages: string | string[];
     maxErrors: string | number;

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

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

package/lib/components/VRating/VRating.mjs

@@ -1,9 +1,9 @@
 import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VRating.css"; // Components
+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";
@@ -11,10 +11,8 @@ import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
-
 import { computed, ref } from 'vue';
 import { createRange, genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
-
 export const VRating = genericComponent()({
   name: 'VRating',
   props: {
@@ -61,7 +59,6 @@ export const VRating = genericComponent()({
   emits: {
     'update:modelValue': value => true
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -98,30 +95,24 @@ export const VRating = genericComponent()({
       function onMouseenter() {
         hoverIndex.value = value;
       }
-
       function onMouseleave() {
         hoverIndex.value = -1;
       }
-
       function onFocus() {
         if (value === 0 && rating.value === 0) {
           var _firstRef$value;
-
           (_firstRef$value = firstRef.value) == null ? void 0 : _firstRef$value.focus();
         } else {
           focusIndex.value = value;
         }
       }
-
       function onBlur() {
         if (!isClicking) focusIndex.value = -1;
       }
-
       function onClick() {
         if (props.disabled || props.readonly) return;
         rating.value = rating.value === value && props.clearable ? 0 : value;
       }
-
       return {
         onMouseenter: props.hover ? onMouseenter : undefined,
         onMouseleave: props.hover ? onMouseleave : undefined,
@@ -130,20 +121,15 @@ export const VRating = genericComponent()({
         onClick
       };
     }));
-
     function onMousedown() {
       isClicking = true;
     }
-
     function onMouseup() {
       isClicking = false;
     }
-
     const name = computed(() => props.name ?? `v-rating-${getUid()}`);
-
     function VRatingItem(_ref2) {
       var _itemState$value$inde, _itemState$value$inde2;
-
       let {
         value,
         index,
@@ -179,7 +165,8 @@ export const VRating = genericComponent()({
         "onMouseleave": onMouseleave
       }, [_createVNode("span", {
         "class": "v-rating__hidden"
-      }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({ ...itemState.value[index],
+      }, [t(props.itemAriaLabel, value, props.length)]), !showStar ? undefined : slots.item ? slots.item({
+        ...itemState.value[index],
         props: btnProps,
         value,
         index
@@ -198,16 +185,13 @@ export const VRating = genericComponent()({
         "disabled": props.disabled
       }, null)]);
     }
-
     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'];
       return _createVNode(props.tag, {
         "class": ['v-rating', {
@@ -221,7 +205,6 @@ export const VRating = genericComponent()({
           "showStar": false
         }, null), range.value.map((value, i) => {
           var _props$itemLabels2, _props$itemLabels3;
-
           return _createVNode("div", {
             "class": "v-rating__wrapper"
           }, [hasLabels && props.itemLabelPosition === 'top' ? createLabel({
@@ -251,6 +234,5 @@ export const VRating = genericComponent()({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VRating.mjs.map

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","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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"}
+{"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 { SlotsToProps } 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  $props: SlotsToProps<{\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/index.d.ts

@@ -1,22 +1,26 @@
 import * as vue from 'vue';
-import { VNodeChild, JSXComponent, PropType, Prop } from 'vue';
+import { JSXComponent, PropType, VNodeChild, Prop } from 'vue';
 
-declare type SlotsToProps<T extends Record<string, Slot>> = {
-    $children: () => (T['default'] | VNodeChild | {
+declare type Density = null | 'default' | 'comfortable' | 'compact';
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare type SlotsToProps<T extends Record<string, any>> = T extends Record<string, Slot> ? ({
+    $children?: (VNodeChild | (keyof T extends 'default' ? T['default'] : {}) | {
         [K in keyof T]?: T[K];
     });
-    'v-slots': new () => {
+    'v-slots'?: {
         [K in keyof T]?: T[K] | false;
     };
-};
+} & {
+    [K in keyof T as `v-slot:${K & string}`]?: T[K] | false;
+}) : T extends Record<string, any[]> ? SlotsToProps<MakeSlots<T>> : never;
 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;
@@ -41,7 +45,7 @@ declare const VRating: {
             size: string | number;
             readonly: boolean;
             tag: string;
-            density: "default" | "compact" | "comfortable" | null;
+            density: Density;
             modelValue: number;
             ripple: boolean;
             clearable: boolean;
@@ -51,7 +55,7 @@ declare const VRating: {
             emptyIcon: IconValue;
             fullIcon: IconValue;
             itemLabelPosition: string;
-        }> & Omit<Readonly<vue.ExtractPropTypes<{
+        }> & Omit<Readonly<vue.ExtractPropTypes<Omit<{
             theme: StringConstructor;
             tag: {
                 type: StringConstructor;
@@ -62,7 +66,7 @@ declare const VRating: {
                 default: string;
             };
             density: {
-                type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+                type: vue.PropType<Density>;
                 default: string;
                 validator: (v: any) => boolean;
             };
@@ -101,10 +105,7 @@ declare const VRating: {
                 validator: (v: any) => boolean;
             };
             ripple: BooleanConstructor;
-        } & SlotsToProps<MakeSlots<{
-            item: [VRatingItemSlot];
-            'item-label': [VRatingItemLabelSlot];
-        }>>>> & {
+        }, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">>> & {
             "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: {
@@ -120,7 +121,7 @@ declare const VRating: {
         $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<{
+        $options: vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
             theme: StringConstructor;
             tag: {
                 type: StringConstructor;
@@ -131,7 +132,7 @@ declare const VRating: {
                 default: string;
             };
             density: {
-                type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+                type: vue.PropType<Density>;
                 default: string;
                 validator: (v: any) => boolean;
             };
@@ -170,20 +171,17 @@ declare const VRating: {
                 validator: (v: any) => boolean;
             };
             ripple: BooleanConstructor;
-        } & SlotsToProps<MakeSlots<{
-            item: [VRatingItemSlot];
-            'item-label': [VRatingItemLabelSlot];
-        }>>>> & {
+        }, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
             'update:modelValue': (value: number) => boolean;
-        }, string, {
+        }, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">, string, {
             length: string | number;
             disabled: boolean;
             size: string | number;
             readonly: boolean;
             tag: string;
-            density: "default" | "compact" | "comfortable" | null;
+            density: Density;
             modelValue: number;
             ripple: boolean;
             clearable: boolean;
@@ -213,7 +211,7 @@ declare const VRating: {
         $forceUpdate: () => void;
         $nextTick: typeof vue.nextTick;
         $watch(source: string | Function, cb: Function, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
-    } & Readonly<vue.ExtractPropTypes<{
+    } & Readonly<vue.ExtractPropTypes<Omit<{
         theme: StringConstructor;
         tag: {
             type: StringConstructor;
@@ -224,7 +222,7 @@ declare const VRating: {
             default: string;
         };
         density: {
-            type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+            type: vue.PropType<Density>;
             default: string;
             validator: (v: any) => boolean;
         };
@@ -263,16 +261,13 @@ declare const VRating: {
             validator: (v: any) => boolean;
         };
         ripple: BooleanConstructor;
-    } & SlotsToProps<MakeSlots<{
-        item: [VRatingItemSlot];
-        'item-label': [VRatingItemLabelSlot];
-    }>>>> & {
+    }, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">>> & {
         "onUpdate:modelValue"?: ((value: number) => any) | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<{
+} & vue.ComponentOptionsBase<Readonly<vue.ExtractPropTypes<Omit<{
     theme: StringConstructor;
     tag: {
         type: StringConstructor;
@@ -283,7 +278,7 @@ declare const VRating: {
         default: string;
     };
     density: {
-        type: vue.PropType<"default" | "compact" | "comfortable" | null>;
+        type: vue.PropType<Density>;
         default: string;
         validator: (v: any) => boolean;
     };
@@ -322,20 +317,17 @@ declare const VRating: {
         validator: (v: any) => boolean;
     };
     ripple: BooleanConstructor;
-} & SlotsToProps<MakeSlots<{
-    item: [VRatingItemSlot];
-    'item-label': [VRatingItemLabelSlot];
-}>>>> & {
+}, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">>> & {
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
     'update:modelValue': (value: number) => boolean;
-}, string, {
+}, "$children" | "v-slots" | "v-slot:item" | "v-slot:item-label">, string, {
     length: string | number;
     disabled: boolean;
     size: string | number;
     readonly: boolean;
     tag: string;
-    density: "default" | "compact" | "comfortable" | null;
+    density: Density;
     modelValue: number;
     ripple: boolean;
     clearable: boolean;
@@ -346,7 +338,7 @@ declare const VRating: {
     fullIcon: IconValue;
     itemLabelPosition: string;
 }> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>() => {
-    $slots: MakeSlots<{
+    $props: SlotsToProps<{
         item: [VRatingItemSlot];
         'item-label': [VRatingItemLabelSlot];
     }>;

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

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

package/lib/components/VResponsive/VResponsive.mjs

@@ -1,9 +1,9 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VResponsive.css"; // Composables
+import "./VResponsive.css";
 
+// Composables
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
-
 import { computed } from 'vue';
 import { defineComponent, useRender } from "../../util/index.mjs";
 export function useAspectStyles(props) {
@@ -23,7 +23,6 @@ export const VResponsive = defineComponent({
     contentClass: String,
     ...makeDimensionProps()
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -36,7 +35,6 @@ export const VResponsive = defineComponent({
     } = useDimension(props);
     useRender(() => {
       var _slots$additional;
-
       return _createVNode("div", {
         "class": "v-responsive",
         "style": dimensionStyles.value
@@ -49,6 +47,5 @@ export const VResponsive = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VResponsive.mjs.map

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

@@ -1 +1 @@
-{"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"}
+{"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\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,eAAe,EAAEC,SAAS;AAEnC,OAAO,SAASC,eAAe,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,eAAe,CAAC;EACzCY,IAAI,EAAE,aAAa;EAEnBT,KAAK,EAAE;IACLI,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;IAC7BO,YAAY,EAAEJ,MAAM;IAEpB,GAAGZ,kBAAkB;EACvB,CAAC;EAEDiB,KAAK,CAAEX,KAAK,QAAa;IAAA,IAAX;MAAEY;IAAM,CAAC;IACrB,MAAM;MAAEX;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEa;IAAgB,CAAC,GAAGlB,YAAY,CAACK,KAAK,CAAC;IAE/CF,SAAS,CAAC;MAAA;MAAA;QAAA,SACG,cAAc;QAAA,SAASe,eAAe,CAACC;MAAK;QAAA,SAC1C,qBAAqB;QAAA,SAASb,YAAY,CAACa;MAAK,+BAEzDF,KAAK,CAACG,UAAU,qBAAhB,uBAAAH,KAAK,CAAe,EAEpBA,KAAK,CAACI,OAAO;QAAA,SACD,CAAC,uBAAuB,EAAEhB,KAAK,CAACU,YAAY;MAAC,IAAIE,KAAK,CAACI,OAAO,EAAE,EAC7E;IAAA,CAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -19,5 +19,6 @@ declare const VResponsive: vue.DefineComponent<{
     aspectRatio: (StringConstructor | NumberConstructor)[];
     contentClass: StringConstructor;
 }>>, {}>;
+declare type VResponsive = InstanceType<typeof VResponsive>;
 
 export { VResponsive };

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

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

package/lib/components/VSelect/VSelect.css

@@ -1,3 +1,15 @@
+.v-input--density-default {
+  --select-chips-margin-bottom: 0px;
+}
+
+.v-input--density-comfortable {
+  --select-chips-margin-bottom: 2px;
+}
+
+.v-input--density-compact {
+  --select-chips-margin-bottom: 4px;
+}
+
 .v-select .v-field .v-text-field__prefix,
 .v-select .v-field .v-text-field__suffix,
 .v-select .v-field .v-field__input, .v-select .v-field.v-field {
@@ -41,6 +53,7 @@
 }
 .v-select--chips .v-select__selection {
   margin-top: 2px;
+  margin-bottom: var(--select-chips-margin-bottom);
 }
 .v-select--chips .v-select__selection:first-child {
   margin-inline-start: 0;