vuetify 3.3.20 → 3.3.22

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/VAutocomplete.css

@@ -35,7 +35,7 @@
   align-items: center;
   letter-spacing: inherit;
   line-height: inherit;
-  max-width: 90%;
+  max-width: calc(100% - 2px);
 }
 .v-autocomplete__selection {
   margin-top: var(--v-input-chips-margin-top);

package/lib/components/VAutocomplete/VAutocomplete.sass

@@ -28,7 +28,7 @@
 
   .v-field--dirty
     .v-autocomplete__selection
-      margin-inline-end: 2px
+      margin-inline-end: $autocomplete-selection-gap
 
   .v-autocomplete__selection-text
     overflow: hidden
@@ -50,7 +50,7 @@
     align-items: center
     letter-spacing: inherit
     line-height: inherit
-    max-width: 90%
+    max-width: calc(100% - $autocomplete-selection-gap)
 
   &__selection
     margin-top: var(--v-input-chips-margin-top)

package/lib/components/VAutocomplete/_variables.scss

@@ -5,6 +5,7 @@ $autocomplete-content-border-radius: 4px !default;
 $autocomplete-content-elevation: 4 !default;
 $autocomplete-focused-input: 64px !default;
 $autocomplete-line-height: 1.75 !default;
+$autocomplete-selection-gap: 2px !default;
 $autocomplete-transition: .2s settings.$standard-easing !default;
 $autocomplete-chips-control-min-height: 64px !default;
 $autocomplete-chips-margin-top: 2px !default;

package/lib/components/VCard/VCard.css

@@ -101,7 +101,6 @@
 }
 .v-card--hover {
   cursor: pointer;
-  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-card--hover::before, .v-card--hover::after {
   border-radius: inherit;
@@ -131,6 +130,9 @@
 .v-card--hover:hover::before {
   opacity: 0;
 }
+.v-card--hover:hover {
+  box-shadow: 0px 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 14px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
 .v-card--link {
   cursor: pointer;
 }

package/lib/components/VCard/VCard.sass

@@ -64,7 +64,8 @@
     &:hover::before
       opacity: 0
 
-    @include tools.elevation(0)
+    &:hover
+      @include tools.elevation($card-hover-elevation)
 
   &--link
     cursor: pointer

package/lib/components/VCard/_variables.scss

@@ -7,9 +7,6 @@ $card-actions-flex: none !default;
 $card-actions-min-height: 52px !default;
 $card-actions-padding: .5rem !default;
 $card-append-padding-inline-start: 1rem !default;
-$card-avatar-align-self: flex-start !default;
-$card-avatar-header-padding: 0 !default;
-$card-avatar-padding: .5rem 1rem !default;
 $card-background: rgb(var(--v-theme-surface)) !default;
 $card-border-color: settings.$border-color-root !default;
 $card-border-radius: settings.$border-radius-root !default;
@@ -49,7 +46,6 @@ $card-title-letter-spacing: tools.map-deep-get(settings.$typography, 'h6', 'lett
 $card-title-line-height: tools.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
 $card-title-overflow-wrap: normal !default;
 $card-title-overflow: hidden !default;
-$card-title-padding-top: 1rem !default;
 $card-title-padding: .5rem 1rem !default;
 $card-title-text-overflow: ellipsis !default;
 $card-title-text-transform: none !default;
@@ -82,7 +78,6 @@ $card-text-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size')
 $card-text-font-weight: tools.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
 $card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-2', 'letter-spacing') !default;
 $card-text-line-height: tools.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
-$card-text-padding-bottom: 1rem !default;
 $card-text-padding: 1rem !default;
 $card-text-text-transform: tools.map-deep-get(settings.$typography, 'body-2', 'text-transform') !default;
 
@@ -122,3 +117,10 @@ $card-variants: (
   $card-plain-opacity,
   'v-card'
 ) !default;
+
+// Deprecated
+$card-avatar-align-self: flex-start !default;
+$card-avatar-header-padding: 0 !default;
+$card-avatar-padding: .5rem 1rem !default;
+$card-title-padding-top: 1rem !default;
+$card-text-padding-bottom: 1rem !default;

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":"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"}
+{"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

@@ -23,7 +23,7 @@ import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs"; // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue';
-import { genericComponent, IN_BROWSER, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+import { genericComponent, IN_BROWSER, isComposingIgnoreKey, noop, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 function highlightResult(text, matches, length) {
   if (matches == null) return text;
   if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
@@ -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)];
         }
@@ -183,7 +183,7 @@ export const VCombobox = genericComponent()({
       menu.value = !menu.value;
     }
     function onKeydown(e) {
-      if (props.readonly || form?.isReadonly.value) return;
+      if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = model.value.length;
       if (selectionIndex.value > -1 || ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {