vuetify 3.2.3 → 3.2.5

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

@@ -180,6 +180,31 @@ declare const VCarousel: {
                     ariaLabel: string;
                 };
             }) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: ((args_0: {
+                    group: GroupProvide;
+                }) => vue.VNodeChild) | undefined;
+                additional?: ((args_0: {
+                    group: GroupProvide;
+                }) => vue.VNodeChild) | undefined;
+                prev?: ((args_0: {
+                    props: {
+                        icon: IconValue;
+                        class: string;
+                        onClick: () => void;
+                        ariaLabel: string;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: ((args_0: {
+                    props: {
+                        icon: IconValue;
+                        class: string;
+                        onClick: () => void;
+                        ariaLabel: string;
+                    };
+                }) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((val: any) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "reverse" | "interval" | "height" | "direction" | "style" | "disabled" | "tag" | "mandatory" | "touch" | "selectedClass" | "continuous" | "nextIcon" | "prevIcon" | "showArrows" | "cycle" | "delimiterIcon" | "hideDelimiters" | "hideDelimiterBackground">;
@@ -296,6 +321,31 @@ declare const VCarousel: {
                     ariaLabel: string;
                 };
             }) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: ((args_0: {
+                    group: GroupProvide;
+                }) => vue.VNodeChild) | undefined;
+                additional?: ((args_0: {
+                    group: GroupProvide;
+                }) => vue.VNodeChild) | undefined;
+                prev?: ((args_0: {
+                    props: {
+                        icon: IconValue;
+                        class: string;
+                        onClick: () => void;
+                        ariaLabel: string;
+                    };
+                }) => vue.VNodeChild) | undefined;
+                next?: ((args_0: {
+                    props: {
+                        icon: IconValue;
+                        class: string;
+                        onClick: () => void;
+                        ariaLabel: string;
+                    };
+                }) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((val: any) => any) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -439,6 +489,31 @@ declare const VCarousel: {
                 ariaLabel: string;
             };
         }) => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: ((args_0: {
+                group: GroupProvide;
+            }) => vue.VNodeChild) | undefined;
+            additional?: ((args_0: {
+                group: GroupProvide;
+            }) => vue.VNodeChild) | undefined;
+            prev?: ((args_0: {
+                props: {
+                    icon: IconValue;
+                    class: string;
+                    onClick: () => void;
+                    ariaLabel: string;
+                };
+            }) => vue.VNodeChild) | undefined;
+            next?: ((args_0: {
+                props: {
+                    icon: IconValue;
+                    class: string;
+                    onClick: () => void;
+                    ariaLabel: string;
+                };
+            }) => vue.VNodeChild) | undefined;
+        } | undefined;
     } & {
         "onUpdate:modelValue"?: ((val: any) => any) | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
@@ -545,6 +620,31 @@ declare const VCarousel: {
             ariaLabel: string;
         };
     }) => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: ((args_0: {
+            group: GroupProvide;
+        }) => vue.VNodeChild) | undefined;
+        additional?: ((args_0: {
+            group: GroupProvide;
+        }) => vue.VNodeChild) | undefined;
+        prev?: ((args_0: {
+            props: {
+                icon: IconValue;
+                class: string;
+                onClick: () => void;
+                ariaLabel: string;
+            };
+        }) => vue.VNodeChild) | undefined;
+        next?: ((args_0: {
+            props: {
+                icon: IconValue;
+                class: string;
+                onClick: () => void;
+                ariaLabel: string;
+            };
+        }) => vue.VNodeChild) | undefined;
+    } | undefined;
 } & {
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -769,6 +869,13 @@ declare const VCarouselItem: {
             "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "transition" | "style" | "eager" | "disabled" | "options" | "cover" | "src" | "reverseTransition">;
         $attrs: {
             [x: string]: unknown;
@@ -821,6 +928,13 @@ declare const VCarouselItem: {
             "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
             transition: string | boolean;
             style: vue.StyleValue;
@@ -888,6 +1002,13 @@ declare const VCarouselItem: {
         "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -930,6 +1051,13 @@ declare const VCarouselItem: {
     "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+        placeholder?: (() => vue.VNodeChild) | undefined;
+        error?: (() => vue.VNodeChild) | undefined;
+        sources?: (() => vue.VNodeChild) | undefined;
+    } | undefined;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
     transition: string | boolean;
     style: vue.StyleValue;

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

@@ -141,6 +141,18 @@ declare const VCheckbox: {
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
+                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                label?: ((args_0: {
+                    label: string | undefined;
+                    props: Record<string, unknown>;
+                }) => vue.VNodeChild) | undefined;
+                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "error" | "direction" | "style" | "disabled" | "multiple" | "readonly" | "indeterminate" | "messages" | "density" | "ripple" | "focused" | "errorMessages" | "maxErrors" | "rules" | "persistentHint" | "falseIcon" | "trueIcon" | "valueComparator" | "indeterminateIcon">;
@@ -232,6 +244,18 @@ declare const VCheckbox: {
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: ((...args: never) => vue.VNodeChild) | undefined;
+                prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+                label?: ((args_0: {
+                    label: string | undefined;
+                    props: Record<string, unknown>;
+                }) => vue.VNodeChild) | undefined;
+                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -351,6 +375,18 @@ declare const VCheckbox: {
             props: Record<string, unknown>;
         }) => vue.VNodeChild) | undefined;
         "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: ((...args: never) => vue.VNodeChild) | undefined;
+            prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+            label?: ((args_0: {
+                label: string | undefined;
+                props: Record<string, unknown>;
+            }) => vue.VNodeChild) | undefined;
+            input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
     } & {
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
@@ -432,6 +468,18 @@ declare const VCheckbox: {
         props: Record<string, unknown>;
     }) => vue.VNodeChild) | undefined;
     "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: ((...args: never) => vue.VNodeChild) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
 } & {
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -692,6 +740,15 @@ declare const VCheckboxBtn: {
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                label?: ((args_0: {
+                    label: string | undefined;
+                    props: Record<string, unknown>;
+                }) => vue.VNodeChild) | undefined;
+                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
             "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
@@ -760,6 +817,15 @@ declare const VCheckboxBtn: {
                 props: Record<string, unknown>;
             }) => vue.VNodeChild) | undefined;
             "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                label?: ((args_0: {
+                    label: string | undefined;
+                    props: Record<string, unknown>;
+                }) => vue.VNodeChild) | undefined;
+                input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
             "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
@@ -851,6 +917,15 @@ declare const VCheckboxBtn: {
             props: Record<string, unknown>;
         }) => vue.VNodeChild) | undefined;
         "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+            label?: ((args_0: {
+                label: string | undefined;
+                props: Record<string, unknown>;
+            }) => vue.VNodeChild) | undefined;
+            input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
@@ -909,6 +984,15 @@ declare const VCheckboxBtn: {
         props: Record<string, unknown>;
     }) => vue.VNodeChild) | undefined;
     "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;

package/lib/components/VChip/VChip.css

@@ -2,7 +2,6 @@
   align-items: center;
   cursor: default;
   display: inline-flex;
-  flex: 1 0;
   font-weight: 400;
   max-width: 100%;
   min-width: 0;
@@ -351,10 +350,12 @@
   border-radius: 4px;
 }
 
+.v-chip__content {
+  align-items: center;
+  display: inline-flex;
+}
 .v-autocomplete__selection .v-chip__content, .v-combobox__selection .v-chip__content, .v-select__selection .v-chip__content {
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .v-chip__filter,

package/lib/components/VChip/VChip.sass

@@ -6,7 +6,6 @@
   align-items: center
   cursor: default
   display: inline-flex
-  flex: 1 0
   font-weight: $chip-font-weight
   max-width: $chip-max-width
   min-width: 0
@@ -39,12 +38,13 @@
 
 // Elements
 .v-chip__content
+  align-items: center
+  display: inline-flex
+
   .v-autocomplete__selection &,
   .v-combobox__selection &,
   .v-select__selection &
     overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
 
 .v-chip__filter,
 .v-chip__prepend,

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

@@ -97,6 +97,13 @@ declare const VChip: {
             "v-slot:label"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                label?: (() => vue.VNodeChild) | undefined;
+                prepend?: (() => vue.VNodeChild) | undefined;
+                append?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             onClick?: ((e: MouseEvent | KeyboardEvent) => any) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -177,6 +184,13 @@ declare const VChip: {
             "v-slot:label"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                label?: (() => vue.VNodeChild) | undefined;
+                prepend?: (() => vue.VNodeChild) | undefined;
+                append?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             onClick?: ((e: MouseEvent | KeyboardEvent) => any) | undefined;
             "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -289,6 +303,13 @@ declare const VChip: {
         "v-slot:label"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
         "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+            label?: (() => vue.VNodeChild) | undefined;
+            prepend?: (() => vue.VNodeChild) | undefined;
+            append?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
     } & {
         onClick?: ((e: MouseEvent | KeyboardEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
@@ -357,6 +378,13 @@ declare const VChip: {
     "v-slot:label"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+        label?: (() => vue.VNodeChild) | undefined;
+        prepend?: (() => vue.VNodeChild) | undefined;
+        append?: (() => vue.VNodeChild) | undefined;
+    } | undefined;
 } & {
     onClick?: ((e: MouseEvent | KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;

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

@@ -48,6 +48,10 @@ declare const VChipGroup: {
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "filter" | "style" | "disabled" | "multiple" | "tag" | "column" | "variant" | "modelValue" | "selectedClass" | "valueComparator">;
@@ -90,6 +94,10 @@ declare const VChipGroup: {
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & {
             "onUpdate:modelValue"?: ((value: any) => any) | undefined;
         }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -151,6 +159,10 @@ declare const VChipGroup: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
     } & {
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
@@ -183,6 +195,10 @@ declare const VChipGroup: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+    } | undefined;
 } & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {

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

@@ -26,6 +26,10 @@ declare const VCode: {
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag">;
         $attrs: {
             [x: string]: unknown;
@@ -54,6 +58,10 @@ declare const VCode: {
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
         }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
@@ -93,6 +101,10 @@ declare const VCode: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
     } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>> & {} & vue.ComponentCustomProperties & {};
@@ -113,6 +125,10 @@ declare const VCode: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    $slots?: {
+        default?: (() => vue.VNodeChild) | undefined;
+    } | undefined;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -6,7 +6,7 @@ import "./VColorPickerCanvas.css";
 import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
 import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from "../../util/index.mjs";
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 
 // Types
 
@@ -40,8 +40,8 @@ export const VColorPickerCanvas = defineComponent({
     let {
       emit
     } = _ref;
-    const isInteracting = ref(false);
-    const isOutsideUpdate = ref(false);
+    const isInteracting = shallowRef(false);
+    const isOutsideUpdate = shallowRef(false);
     const dotPosition = ref({
       x: 0,
       y: 0
@@ -59,8 +59,8 @@ export const VColorPickerCanvas = defineComponent({
       };
     });
     const canvasRef = ref();
-    const canvasWidth = ref(parseFloat(props.width));
-    const canvasHeight = ref(parseFloat(props.height));
+    const canvasWidth = shallowRef(parseFloat(props.width));
+    const canvasHeight = shallowRef(parseFloat(props.height));
     const {
       resizeRef
     } = useResizeObserver(entries => {

package/lib/components/VColorPicker/VColorPickerCanvas.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","computed","onMounted","ref","watch","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSV } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  height: {\n    type: [Number, String],\n    default: 150,\n  },\n  width: {\n    type: [Number, String],\n    default: 300,\n  },\n\n  ...makeComponentProps(),\n}, 'v-color-picker-canvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = ref(parseFloat(props.width))\n    const canvasHeight = ref(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\n          <div\n            class={[\n              'v-color-picker-canvas__dot',\n              {\n                'v-color-picker-canvas__dot--disabled': props.disabled,\n              },\n            ]}\n            style={ dotStyles.value }\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","computed","onMounted","ref","shallowRef","watch","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","canvasWidth","parseFloat","canvasHeight","resizeRef","entries","offsetParent","contentRect","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\n\n// Types\nimport type { HSV } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  dotSize: {\n    type: [Number, String],\n    default: 10,\n  },\n  height: {\n    type: [Number, String],\n    default: 150,\n  },\n  width: {\n    type: [Number, String],\n    default: 300,\n  },\n\n  ...makeComponentProps(),\n}, 'v-color-picker-canvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const isOutsideUpdate = shallowRef(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n    const { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.value?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n        v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\n          <div\n            class={[\n              'v-color-picker-canvas__dot',\n              {\n                'v-color-picker-canvas__dot--disabled': props.disabled,\n              },\n            ]}\n            style={ dotStyles.value }\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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"}

package/lib/components/VCombobox/VCombobox.mjs

@@ -19,7 +19,7 @@ import { useForm } from "../../composables/form.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utility
-import { computed, mergeProps, nextTick, ref, watch } from 'vue';
+import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue';
 import { genericComponent, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs";
 import { makeVTextFieldProps } from "../VTextField/VTextField.mjs"; // Types
 function highlightResult(text, matches, length) {
@@ -69,8 +69,8 @@ export const VCombobox = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const isFocused = ref(false);
-    const isPristine = ref(true);
+    const isFocused = shallowRef(false);
+    const isPristine = shallowRef(true);
     const vMenuRef = ref();
     const _menu = useProxiedModel(props, 'menu');
     const menu = computed({
@@ -80,7 +80,7 @@ export const VCombobox = genericComponent()({
         _menu.value = v;
       }
     });
-    const selectionIndex = ref(-1);
+    const selectionIndex = shallowRef(-1);
     let cleared = false;
     const color = computed(() => vTextFieldRef.value?.color);
     const {
@@ -97,7 +97,7 @@ export const VCombobox = genericComponent()({
       return props.multiple ? transformed : transformed[0] ?? null;
     });
     const form = useForm();
-    const _search = ref(!props.multiple ? model.value[0]?.title ?? '' : '');
+    const _search = shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
     const search = computed({
       get: () => {
         return _search.value;