vuetify 3.3.19 → 3.3.21

package/lib/blueprints/index.d.mts

@@ -146,6 +146,8 @@ interface DateAdapter<T> {
     date(value?: any): T | null;
     format(date: T, formatString: string): string;
     toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
     startOfDay(date: T): T;
     endOfDay(date: T): T;
     startOfMonth(date: T): T;

package/lib/blueprints/md1.d.mts

@@ -146,6 +146,8 @@ interface DateAdapter<T> {
     date(value?: any): T | null;
     format(date: T, formatString: string): string;
     toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
     startOfDay(date: T): T;
     endOfDay(date: T): T;
     startOfMonth(date: T): T;

package/lib/blueprints/md2.d.mts

@@ -146,6 +146,8 @@ interface DateAdapter<T> {
     date(value?: any): T | null;
     format(date: T, formatString: string): string;
     toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
     startOfDay(date: T): T;
     endOfDay(date: T): T;
     startOfMonth(date: T): T;

package/lib/blueprints/md3.d.mts

@@ -146,6 +146,8 @@ interface DateAdapter<T> {
     date(value?: any): T | null;
     format(date: T, formatString: string): string;
     toJsDate(value: T): Date;
+    parseISO(date: string): T;
+    toISO(date: T): string;
     startOfDay(date: T): T;
     endOfDay(date: T): T;
     startOfMonth(date: T): T;

package/lib/components/VAutocomplete/index.d.mts

@@ -232,7 +232,7 @@ declare const VAutocomplete: {
             valueComparator?: typeof deepEqual | undefined;
             clearIcon?: IconValue | undefined;
             focused?: boolean | undefined;
-            errorMessages?: string | readonly string[] | undefined;
+            errorMessages?: string | readonly string[] | null | undefined;
             maxErrors?: string | number | undefined;
             rules?: readonly ValidationRule[] | undefined;
             centerAffix?: boolean | undefined;
@@ -271,7 +271,7 @@ declare const VAutocomplete: {
             ref_for?: boolean | undefined;
             ref_key?: string | undefined;
             theme?: string | undefined;
-            counter?: string | number | true | undefined;
+            counter?: string | number | boolean | undefined;
             onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
                 [key: string]: any;
             }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -544,7 +544,7 @@ declare const VAutocomplete: {
             valueComparator: typeof deepEqual;
             clearIcon: IconValue;
             focused: boolean;
-            errorMessages: string | readonly string[];
+            errorMessages: string | readonly string[] | null;
             maxErrors: string | number;
             rules: readonly ValidationRule[];
             persistentHint: boolean;
@@ -579,7 +579,7 @@ declare const VAutocomplete: {
             class?: any;
             placeholder?: string | undefined;
             theme?: string | undefined;
-            counter?: string | number | true | undefined;
+            counter?: string | number | boolean | undefined;
             rounded?: string | number | boolean | undefined;
             bgColor?: string | undefined;
             prependIcon?: IconValue | undefined;
@@ -752,7 +752,7 @@ declare const VAutocomplete: {
             valueComparator: typeof deepEqual;
             clearIcon: IconValue;
             focused: boolean;
-            errorMessages: string | readonly string[];
+            errorMessages: string | readonly string[] | null;
             maxErrors: string | number;
             rules: readonly ValidationRule[];
             centerAffix: boolean;
@@ -881,7 +881,7 @@ declare const VAutocomplete: {
         valueComparator: typeof deepEqual;
         clearIcon: IconValue;
         focused: boolean;
-        errorMessages: string | readonly string[];
+        errorMessages: string | readonly string[] | null;
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         persistentHint: boolean;
@@ -916,7 +916,7 @@ declare const VAutocomplete: {
         class?: any;
         placeholder?: string | undefined;
         theme?: string | undefined;
-        counter?: string | number | true | undefined;
+        counter?: string | number | boolean | undefined;
         rounded?: string | number | boolean | undefined;
         bgColor?: string | undefined;
         prependIcon?: IconValue | undefined;
@@ -1087,7 +1087,7 @@ declare const VAutocomplete: {
     valueComparator: typeof deepEqual;
     clearIcon: IconValue;
     focused: boolean;
-    errorMessages: string | readonly string[];
+    errorMessages: string | readonly string[] | null;
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     persistentHint: boolean;
@@ -1122,7 +1122,7 @@ declare const VAutocomplete: {
     class?: any;
     placeholder?: string | undefined;
     theme?: string | undefined;
-    counter?: string | number | true | undefined;
+    counter?: string | number | boolean | undefined;
     rounded?: string | number | boolean | undefined;
     bgColor?: string | undefined;
     prependIcon?: IconValue | undefined;
@@ -1295,7 +1295,7 @@ declare const VAutocomplete: {
     valueComparator: typeof deepEqual;
     clearIcon: IconValue;
     focused: boolean;
-    errorMessages: string | readonly string[];
+    errorMessages: string | readonly string[] | null;
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     centerAffix: boolean;
@@ -1482,7 +1482,7 @@ declare const VAutocomplete: {
     class: PropType<any>;
     placeholder: StringConstructor;
     theme: StringConstructor;
-    counter: PropType<string | number | true>;
+    counter: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     messages: {
         type: PropType<string | readonly string[]>;
         default: () => never[];
@@ -1522,7 +1522,7 @@ declare const VAutocomplete: {
     'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     validateOn: PropType<"lazy" | ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | undefined>;
     errorMessages: {
-        type: PropType<string | readonly string[]>;
+        type: PropType<string | readonly string[] | null>;
         default: () => never[];
     };
     maxErrors: {
@@ -1787,7 +1787,7 @@ declare const VAutocomplete: {
     class: PropType<any>;
     placeholder: StringConstructor;
     theme: StringConstructor;
-    counter: PropType<string | number | true>;
+    counter: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     messages: {
         type: PropType<string | readonly string[]>;
         default: () => never[];
@@ -1827,7 +1827,7 @@ declare const VAutocomplete: {
     'onUpdate:focused': PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     validateOn: PropType<"lazy" | ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | undefined>;
     errorMessages: {
-        type: PropType<string | readonly string[]>;
+        type: PropType<string | readonly string[] | null>;
         default: () => never[];
     };
     maxErrors: {

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

@@ -70,7 +70,7 @@ declare const VCheckbox: {
             valueComparator?: typeof deepEqual | undefined;
             indeterminateIcon?: IconValue | undefined;
             focused?: boolean | undefined;
-            errorMessages?: string | readonly string[] | undefined;
+            errorMessages?: string | readonly string[] | null | undefined;
             maxErrors?: string | number | undefined;
             rules?: readonly ValidationRule[] | undefined;
             centerAffix?: boolean | undefined;
@@ -241,7 +241,7 @@ declare const VCheckbox: {
             valueComparator: typeof deepEqual;
             indeterminateIcon: IconValue;
             focused: boolean;
-            errorMessages: string | readonly string[];
+            errorMessages: string | readonly string[] | null;
             maxErrors: string | number;
             rules: readonly ValidationRule[];
             centerAffix: boolean;
@@ -338,7 +338,7 @@ declare const VCheckbox: {
             valueComparator: typeof deepEqual;
             indeterminateIcon: IconValue;
             focused: boolean;
-            errorMessages: string | readonly string[];
+            errorMessages: string | readonly string[] | null;
             maxErrors: string | number;
             rules: readonly ValidationRule[];
             centerAffix: boolean;
@@ -407,7 +407,7 @@ declare const VCheckbox: {
         valueComparator: typeof deepEqual;
         indeterminateIcon: IconValue;
         focused: boolean;
-        errorMessages: string | readonly string[];
+        errorMessages: string | readonly string[] | null;
         maxErrors: string | number;
         rules: readonly ValidationRule[];
         centerAffix: boolean;
@@ -505,7 +505,7 @@ declare const VCheckbox: {
     valueComparator: typeof deepEqual;
     indeterminateIcon: IconValue;
     focused: boolean;
-    errorMessages: string | readonly string[];
+    errorMessages: string | readonly string[] | null;
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     centerAffix: boolean;
@@ -602,7 +602,7 @@ declare const VCheckbox: {
     valueComparator: typeof deepEqual;
     indeterminateIcon: IconValue;
     focused: boolean;
-    errorMessages: string | readonly string[];
+    errorMessages: string | readonly string[] | null;
     maxErrors: string | number;
     rules: readonly ValidationRule[];
     centerAffix: boolean;
@@ -691,7 +691,7 @@ declare const VCheckbox: {
     focused: BooleanConstructor;
     'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
-        type: vue.PropType<string | readonly string[]>;
+        type: vue.PropType<string | readonly string[] | null>;
         default: () => never[];
     };
     maxErrors: {
@@ -780,7 +780,7 @@ declare const VCheckbox: {
     focused: BooleanConstructor;
     'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     errorMessages: {
-        type: vue.PropType<string | readonly string[]>;
+        type: vue.PropType<string | readonly string[] | null>;
         default: () => never[];
     };
     maxErrors: {

package/lib/components/VChip/VChip.css

@@ -17,162 +17,162 @@
 }
 .v-chip.v-chip--size-x-small {
   --v-chip-size: 0.625rem;
-  --v-chip-height: 18px;
+  --v-chip-height: 20px;
   font-size: 0.625rem;
-  padding: 0 7px;
+  padding: 0 8px;
 }
 .v-chip.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 12px;
+  --v-avatar-height: 14px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar {
-  --v-avatar-height: 18px;
+  --v-avatar-height: 20px;
 }
 
 .v-chip.v-chip--size-x-small .v-avatar--start {
-  margin-inline-start: -4.9px;
-  margin-inline-end: 3.5px;
+  margin-inline-start: -5.6px;
+  margin-inline-end: 4px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--start {
-  margin-inline-start: -7px;
+  margin-inline-start: -8px;
 }
 
 .v-chip.v-chip--size-x-small .v-avatar--end {
-  margin-inline-start: 3.5px;
-  margin-inline-end: -4.9px;
+  margin-inline-start: 4px;
+  margin-inline-end: -5.6px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end {
-  margin-inline-end: -7px;
+  margin-inline-end: -8px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close {
-  margin-inline-start: 10.5px;
+  margin-inline-start: 12px;
 }
 
 .v-chip.v-chip--size-x-small .v-icon--start,
 .v-chip.v-chip--size-x-small .v-chip__filter {
-  margin-inline-start: -3.5px;
-  margin-inline-end: 3.5px;
+  margin-inline-start: -4px;
+  margin-inline-end: 4px;
 }
 .v-chip.v-chip--size-x-small .v-icon--end,
 .v-chip.v-chip--size-x-small .v-chip__close {
-  margin-inline-start: 3.5px;
-  margin-inline-end: -3.5px;
+  margin-inline-start: 4px;
+  margin-inline-end: -4px;
 }
 .v-chip.v-chip--size-x-small .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-x-small .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-x-small .v-chip__append + .v-chip__close {
-  margin-inline-start: 7px;
+  margin-inline-start: 8px;
 }
 
 .v-chip.v-chip--size-small {
   --v-chip-size: 0.75rem;
-  --v-chip-height: 24px;
+  --v-chip-height: 26px;
   font-size: 0.75rem;
-  padding: 0 9px;
+  padding: 0 10px;
 }
 .v-chip.v-chip--size-small .v-avatar {
-  --v-avatar-height: 18px;
+  --v-avatar-height: 20px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar {
-  --v-avatar-height: 24px;
+  --v-avatar-height: 26px;
 }
 
 .v-chip.v-chip--size-small .v-avatar--start {
-  margin-inline-start: -6.3px;
-  margin-inline-end: 4.5px;
+  margin-inline-start: -7px;
+  margin-inline-end: 5px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--start {
-  margin-inline-start: -9px;
+  margin-inline-start: -10px;
 }
 
 .v-chip.v-chip--size-small .v-avatar--end {
-  margin-inline-start: 4.5px;
-  margin-inline-end: -6.3px;
+  margin-inline-start: 5px;
+  margin-inline-end: -7px;
 }
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--end {
-  margin-inline-end: -9px;
+  margin-inline-end: -10px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-small .v-avatar--end + .v-chip__close {
-  margin-inline-start: 13.5px;
+  margin-inline-start: 15px;
 }
 
 .v-chip.v-chip--size-small .v-icon--start,
 .v-chip.v-chip--size-small .v-chip__filter {
-  margin-inline-start: -4.5px;
-  margin-inline-end: 4.5px;
+  margin-inline-start: -5px;
+  margin-inline-end: 5px;
 }
 .v-chip.v-chip--size-small .v-icon--end,
 .v-chip.v-chip--size-small .v-chip__close {
-  margin-inline-start: 4.5px;
-  margin-inline-end: -4.5px;
+  margin-inline-start: 5px;
+  margin-inline-end: -5px;
 }
 .v-chip.v-chip--size-small .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-small .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-small .v-chip__append + .v-chip__close {
-  margin-inline-start: 9px;
+  margin-inline-start: 10px;
 }
 
 .v-chip.v-chip--size-default {
   --v-chip-size: 0.875rem;
-  --v-chip-height: 30px;
+  --v-chip-height: 32px;
   font-size: 0.875rem;
-  padding: 0 11px;
+  padding: 0 12px;
 }
 .v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 24px;
+  --v-avatar-height: 26px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar {
-  --v-avatar-height: 30px;
+  --v-avatar-height: 32px;
 }
 
 .v-chip.v-chip--size-default .v-avatar--start {
-  margin-inline-start: -7.7px;
-  margin-inline-end: 5.5px;
+  margin-inline-start: -8.4px;
+  margin-inline-end: 6px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--start {
-  margin-inline-start: -11px;
+  margin-inline-start: -12px;
 }
 
 .v-chip.v-chip--size-default .v-avatar--end {
-  margin-inline-start: 5.5px;
-  margin-inline-end: -7.7px;
+  margin-inline-start: 6px;
+  margin-inline-end: -8.4px;
 }
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--end {
-  margin-inline-end: -11px;
+  margin-inline-end: -12px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-default .v-avatar--end + .v-chip__close {
-  margin-inline-start: 16.5px;
+  margin-inline-start: 18px;
 }
 
 .v-chip.v-chip--size-default .v-icon--start,
 .v-chip.v-chip--size-default .v-chip__filter {
-  margin-inline-start: -5.5px;
-  margin-inline-end: 5.5px;
+  margin-inline-start: -6px;
+  margin-inline-end: 6px;
 }
 .v-chip.v-chip--size-default .v-icon--end,
 .v-chip.v-chip--size-default .v-chip__close {
-  margin-inline-start: 5.5px;
-  margin-inline-end: -5.5px;
+  margin-inline-start: 6px;
+  margin-inline-end: -6px;
 }
 .v-chip.v-chip--size-default .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-default .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-default .v-chip__append + .v-chip__close {
-  margin-inline-start: 11px;
+  margin-inline-start: 12px;
 }
 
 .v-chip.v-chip--size-large {
   --v-chip-size: 1rem;
-  --v-chip-height: 36px;
+  --v-chip-height: 38px;
   font-size: 1rem;
   padding: 0 14px;
 }
 .v-chip.v-chip--size-large .v-avatar {
-  --v-avatar-height: 30px;
+  --v-avatar-height: 32px;
 }
 .v-chip--pill.v-chip.v-chip--size-large .v-avatar {
-  --v-avatar-height: 36px;
+  --v-avatar-height: 38px;
 }
 
 .v-chip.v-chip--size-large .v-avatar--start {
@@ -213,51 +213,51 @@
 
 .v-chip.v-chip--size-x-large {
   --v-chip-size: 1.125rem;
-  --v-chip-height: 42px;
+  --v-chip-height: 44px;
   font-size: 1.125rem;
-  padding: 0 16px;
+  padding: 0 17px;
 }
 .v-chip.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 36px;
+  --v-avatar-height: 38px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar {
-  --v-avatar-height: 42px;
+  --v-avatar-height: 44px;
 }
 
 .v-chip.v-chip--size-x-large .v-avatar--start {
-  margin-inline-start: -11.2px;
-  margin-inline-end: 8px;
+  margin-inline-start: -11.9px;
+  margin-inline-end: 8.5px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--start {
-  margin-inline-start: -16px;
+  margin-inline-start: -17px;
 }
 
 .v-chip.v-chip--size-x-large .v-avatar--end {
-  margin-inline-start: 8px;
-  margin-inline-end: -11.2px;
+  margin-inline-start: 8.5px;
+  margin-inline-end: -11.9px;
 }
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end {
-  margin-inline-end: -16px;
+  margin-inline-end: -17px;
 }
 
 .v-chip--pill.v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close {
-  margin-inline-start: 24px;
+  margin-inline-start: 25.5px;
 }
 
 .v-chip.v-chip--size-x-large .v-icon--start,
 .v-chip.v-chip--size-x-large .v-chip__filter {
-  margin-inline-start: -8px;
-  margin-inline-end: 8px;
+  margin-inline-start: -8.5px;
+  margin-inline-end: 8.5px;
 }
 .v-chip.v-chip--size-x-large .v-icon--end,
 .v-chip.v-chip--size-x-large .v-chip__close {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
+  margin-inline-start: 8.5px;
+  margin-inline-end: -8.5px;
 }
 .v-chip.v-chip--size-x-large .v-icon--end + .v-chip__close,
 .v-chip.v-chip--size-x-large .v-avatar--end + .v-chip__close,
 .v-chip.v-chip--size-x-large .v-chip__append + .v-chip__close {
-  margin-inline-start: 16px;
+  margin-inline-start: 17px;
 }
 
 .v-chip.v-chip--density-default {

package/lib/components/VChip/_variables.scss

@@ -17,7 +17,7 @@ $chip-disabled-opacity: 0.3 !default;
 $chip-elevation: 1 !default;
 $chip-font-size: tools.map-deep-get(settings.$typography, "button", "size") !default;
 $chip-font-weight: 400 !default;
-$chip-height: 30px !default;
+$chip-height: 32px !default;
 $chip-icon-font-size: 1.25rem !default;
 $chip-label-border-radius: settings.$border-radius-root !default;
 $chip-max-width: 100% !default;

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -53,6 +53,7 @@ export const VColorPickerCanvas = defineComponent({
           x,
           y
         } = val;
+        _dotPosition.value = val;
         emit('update:color', {
           h: props.color?.h ?? 0,
           s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","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 { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\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}, 'VColorPickerCanvas')\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 canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\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\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 { 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 handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\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    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      _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        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ 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":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB,gDAE1B;AACA,SAASC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACxDC,KAAK,EAAEC,aAAa,EAAEC,eAAe,EAAEC,mBAAmB,EAAEC,YAAY,EAAEC,SAAS,gCAE5F;AAIA,OAAO,MAAMC,2BAA2B,GAAGF,YAAY,CAAC;EACtDG,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACDC,QAAQ,EAAEC,OAAO;EACjBC,OAAO,EAAE;IACPJ,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EACDC,MAAM,EAAE;IACNR,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLT,IAAI,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC;IACtBC,OAAO,EAAE;EACX,CAAC;EAED,GAAGtB,kBAAkB;AACvB,CAAC,EAAE,oBAAoB,CAAC;AAExB,OAAO,MAAMyB,kBAAkB,GAAGhB,eAAe,CAAC;EAChDiB,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAEd,2BAA2B,EAAE;EAEpCe,KAAK,EAAE;IACL,cAAc,EAAGd,KAAU,IAAK,IAAI;IACpC,iBAAiB,EAAGe,GAAQ,IAAK;EACnC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpB,MAAME,aAAa,GAAG5B,UAAU,CAAC,KAAK,CAAC;IACvC,MAAM6B,SAAS,GAAG9B,GAAG,EAA4B;IACjD,MAAM+B,WAAW,GAAG9B,UAAU,CAAC+B,UAAU,CAACT,KAAK,CAACH,KAAK,CAAC,CAAC;IACvD,MAAMa,YAAY,GAAGhC,UAAU,CAAC+B,UAAU,CAACT,KAAK,CAACJ,MAAM,CAAC,CAAC;IAEzD,MAAMe,YAAY,GAAGlC,GAAG,CAAC;MAAEmC,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAC,CAAC;IACxC,MAAMC,WAAW,GAAGvC,QAAQ,CAAC;MAC3BwC,GAAG,EAAEA,CAAA,KAAMJ,YAAY,CAACK,KAAK;MAC7BC,GAAGA,CAAEC,GAAG,EAAE;QACR,IAAI,CAACX,SAAS,CAACS,KAAK,EAAE;QAEtB,MAAM;UAAEJ,CAAC;UAAEC;QAAE,CAAC,GAAGK,GAAG;QAEpBb,IAAI,CAAC,cAAc,EAAE;UACnBc,CAAC,EAAEnB,KAAK,CAACb,KAAK,EAAEgC,CAAC,IAAI,CAAC;UACtBC,CAAC,EAAExC,KAAK,CAACgC,CAAC,EAAE,CAAC,EAAEJ,WAAW,CAACQ,KAAK,CAAC,GAAGR,WAAW,CAACQ,KAAK;UACrDK,CAAC,EAAE,CAAC,GAAGzC,KAAK,CAACiC,CAAC,EAAE,CAAC,EAAEH,YAAY,CAACM,KAAK,CAAC,GAAGN,YAAY,CAACM,KAAK;UAC3DM,CAAC,EAAEtB,KAAK,CAACb,KAAK,EAAEmC,CAAC,IAAI;QACvB,CAAC,CAAC;MACJ;IACF,CAAC,CAAC;IAEF,MAAMC,SAAS,GAAGhD,QAAQ,CAAC,MAAM;MAC/B,MAAM;QAAEqC,CAAC;QAAEC;MAAE,CAAC,GAAGC,WAAW,CAACE,KAAK;MAClC,MAAMQ,MAAM,GAAGC,QAAQ,CAACzB,KAAK,CAACR,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC;MAE9C,OAAO;QACLK,KAAK,EAAEhB,aAAa,CAACmB,KAAK,CAACR,OAAO,CAAC;QACnCI,MAAM,EAAEf,aAAa,CAACmB,KAAK,CAACR,OAAO,CAAC;QACpCkC,SAAS,EAAG,aAAY7C,aAAa,CAAC+B,CAAC,GAAGY,MAAM,CAAE,KAAI3C,aAAa,CAACgC,CAAC,GAAGW,MAAM,CAAE;MAClF,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;MAAEG;IAAU,CAAC,GAAGrD,iBAAiB,CAACsD,OAAO,IAAI;MACjD,IAAI,CAACD,SAAS,CAACX,KAAK,EAAEa,YAAY,EAAE;MAEpC,MAAM;QAAEhC,KAAK;QAAED;MAAO,CAAC,GAAGgC,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW;MAEhDtB,WAAW,CAACQ,KAAK,GAAGnB,KAAK;MACzBa,YAAY,CAACM,KAAK,GAAGpB,MAAM;IAC7B,CAAC,CAAC;IAEF,SAASmC,iBAAiBA,CAAEnB,CAAS,EAAEC,CAAS,EAAEmB,IAAa,EAAE;MAC/D,MAAM;QAAEC,IAAI;QAAEC,GAAG;QAAErC,KAAK;QAAED;MAAO,CAAC,GAAGoC,IAAI;MACzClB,WAAW,CAACE,KAAK,GAAG;QAClBJ,CAAC,EAAEhC,KAAK,CAACgC,CAAC,GAAGqB,IAAI,EAAE,CAAC,EAAEpC,KAAK,CAAC;QAC5BgB,CAAC,EAAEjC,KAAK,CAACiC,CAAC,GAAGqB,GAAG,EAAE,CAAC,EAAEtC,MAAM;MAC7B,CAAC;IACH;IAEA,SAASuC,eAAeA,CAAEC,CAA0B,EAAE;MACpD,IAAIA,CAAC,CAAChD,IAAI,KAAK,WAAW,EAAE;QAC1B;QACAgD,CAAC,CAACC,cAAc,EAAE;MACpB;MAEA,IAAIrC,KAAK,CAACV,QAAQ,EAAE;MAEpBgD,eAAe,CAACF,CAAC,CAAC;MAElBG,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEF,eAAe,CAAC;MACrDC,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEC,aAAa,CAAC;MACjDF,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEF,eAAe,CAAC;MACrDC,MAAM,CAACC,gBAAgB,CAAC,UAAU,EAAEC,aAAa,CAAC;IACpD;IAEA,SAASH,eAAeA,CAAEF,CAA0B,EAAE;MACpD,IAAIpC,KAAK,CAACV,QAAQ,IAAI,CAACiB,SAAS,CAACS,KAAK,EAAE;MAExCV,aAAa,CAACU,KAAK,GAAG,IAAI;MAE1B,MAAM0B,MAAM,GAAG3D,mBAAmB,CAACqD,CAAC,CAAC;MAErCL,iBAAiB,CAACW,MAAM,CAACC,OAAO,EAAED,MAAM,CAACE,OAAO,EAAErC,SAAS,CAACS,KAAK,CAAC6B,qBAAqB,EAAE,CAAC;IAC5F;IAEA,SAASJ,aAAaA,CAAA,EAAI;MACxBF,MAAM,CAACO,mBAAmB,CAAC,WAAW,EAAER,eAAe,CAAC;MACxDC,MAAM,CAACO,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC;MACpDF,MAAM,CAACO,mBAAmB,CAAC,WAAW,EAAER,eAAe,CAAC;MACxDC,MAAM,CAACO,mBAAmB,CAAC,UAAU,EAAEL,aAAa,CAAC;IACvD;IAEA,SAASM,YAAYA,CAAA,EAAI;MACvB,IAAI,CAACxC,SAAS,CAACS,KAAK,EAAE;MAEtB,MAAMgC,MAAM,GAAGzC,SAAS,CAACS,KAAK;MAC9B,MAAMiC,GAAG,GAAGD,MAAM,CAACE,UAAU,CAAC,IAAI,CAAC;MAEnC,IAAI,CAACD,GAAG,EAAE;MAEV,MAAME,kBAAkB,GAAGF,GAAG,CAACG,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAEJ,MAAM,CAACnD,KAAK,EAAE,CAAC,CAAC;MAC1EsD,kBAAkB,CAACE,YAAY,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAC;MAC3DF,kBAAkB,CAACE,YAAY,CAAC,CAAC,EAAG,QAAOrD,KAAK,CAACb,KAAK,EAAEgC,CAAC,IAAI,CAAE,iBAAgB,CAAC;MAChF8B,GAAG,CAACK,SAAS,GAAGH,kBAAkB;MAClCF,GAAG,CAACM,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAEP,MAAM,CAACnD,KAAK,EAAEmD,MAAM,CAACpD,MAAM,CAAC;MAE/C,MAAM4D,aAAa,GAAGP,GAAG,CAACG,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAEJ,MAAM,CAACpD,MAAM,CAAC;MACtE4D,aAAa,CAACH,YAAY,CAAC,CAAC,EAAE,sBAAsB,CAAC,EAAC;MACtDG,aAAa,CAACH,YAAY,CAAC,CAAC,EAAE,oBAAoB,CAAC,EAAC;MACpDJ,GAAG,CAACK,SAAS,GAAGE,aAAa;MAC7BP,GAAG,CAACM,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAEP,MAAM,CAACnD,KAAK,EAAEmD,MAAM,CAACpD,MAAM,CAAC;IACjD;IAEAjB,KAAK,CAAC,MAAMqB,KAAK,CAACb,KAAK,EAAEgC,CAAC,EAAE4B,YAAY,EAAE;MAAEU,SAAS,EAAE;IAAK,CAAC,CAAC;IAC9D9E,KAAK,CAAC,MAAM,CAAC6B,WAAW,CAACQ,KAAK,EAAEN,YAAY,CAACM,KAAK,CAAC,EAAE,CAAC0C,MAAM,EAAEC,MAAM,KAAK;MACvEZ,YAAY,EAAE;MACdpC,YAAY,CAACK,KAAK,GAAG;QACnBJ,CAAC,EAAEE,WAAW,CAACE,KAAK,CAACJ,CAAC,GAAG8C,MAAM,CAAC,CAAC,CAAC,GAAGC,MAAM,CAAC,CAAC,CAAC;QAC9C9C,CAAC,EAAEC,WAAW,CAACE,KAAK,CAACH,CAAC,GAAG6C,MAAM,CAAC,CAAC,CAAC,GAAGC,MAAM,CAAC,CAAC;MAC/C,CAAC;IACH,CAAC,EAAE;MAAEC,KAAK,EAAE;IAAO,CAAC,CAAC;IAErBjF,KAAK,CAAC,MAAMqB,KAAK,CAACb,KAAK,EAAE,MAAM;MAC7B,IAAImB,aAAa,CAACU,KAAK,EAAE;QACvBV,aAAa,CAACU,KAAK,GAAG,KAAK;QAC3B;MACF;MAEAL,YAAY,CAACK,KAAK,GAAGhB,KAAK,CAACb,KAAK,GAAG;QACjCyB,CAAC,EAAEZ,KAAK,CAACb,KAAK,CAACiC,CAAC,GAAGZ,WAAW,CAACQ,KAAK;QACpCH,CAAC,EAAE,CAAC,CAAC,GAAGb,KAAK,CAACb,KAAK,CAACkC,CAAC,IAAIX,YAAY,CAACM;MACxC,CAAC,GAAG;QAAEJ,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC;IACpB,CAAC,EAAE;MAAEgD,IAAI,EAAE,IAAI;MAAEJ,SAAS,EAAE;IAAK,CAAC,CAAC;IAEnCjF,SAAS,CAAC,MAAMuE,YAAY,EAAE,CAAC;IAE/B9D,SAAS,CAAC,MAAA6E,YAAA;MAAA,OAEAnC,SAAS;MAAA,SACR,CACL,uBAAuB,EACvB3B,KAAK,CAAC+D,KAAK,CACZ;MAAA,SACO/D,KAAK,CAACgE,KAAK;MAAA,eACL7B,eAAe;MAAA,uBACPA;IAAe,IAAA2B,YAAA;MAAA,OAG7BvD,SAAS;MAAA,SACPC,WAAW,CAACQ,KAAK;MAAA,UAChBN,YAAY,CAACM;IAAK,UAE3BhB,KAAK,CAACb,KAAK,IAAA2E,YAAA;MAAA,SAEF,CACL,4BAA4B,EAC5B;QACE,sCAAsC,EAAE9D,KAAK,CAACV;MAChD,CAAC,CACF;MAAA,SACOiC,SAAS,CAACP;IAAK,QAE1B,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","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 { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\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}, 'VColorPickerCanvas')\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 canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\n        _dotPosition.value = val\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\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 { 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 handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\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    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      _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        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ 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

@@ -110,7 +110,7 @@ export const VCombobox = genericComponent()({
         return _search.value;
       },
       set: val => {
-        _search.value = val;
+        _search.value = val ?? '';
         if (!props.multiple) {
           model.value = [transformItem(props, val)];
         }