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

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

@@ -0,0 +1,116 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const VColorPicker: vue.DefineComponent<{
+    theme: StringConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    canvasHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: BooleanConstructor;
+    dotSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    hideCanvas: BooleanConstructor;
+    hideSliders: BooleanConstructor;
+    hideInputs: BooleanConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+        validator: (v: string) => boolean;
+    };
+    modes: {
+        type: PropType<string[]>;
+        default: () => string[];
+        validator: (v: any) => boolean;
+    };
+    showSwatches: BooleanConstructor;
+    swatches: PropType<string[][]>;
+    swatchesMaxHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: PropType<string | Record<string, unknown> | null | undefined>;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (color: any) => true;
+    'update:mode': (mode: string) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    theme: StringConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    canvasHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    disabled: BooleanConstructor;
+    dotSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    hideCanvas: BooleanConstructor;
+    hideSliders: BooleanConstructor;
+    hideInputs: BooleanConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+        validator: (v: string) => boolean;
+    };
+    modes: {
+        type: PropType<string[]>;
+        default: () => string[];
+        validator: (v: any) => boolean;
+    };
+    showSwatches: BooleanConstructor;
+    swatches: PropType<string[][]>;
+    swatchesMaxHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: PropType<string | Record<string, unknown> | null | undefined>;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((color: any) => any) | undefined;
+    "onUpdate:mode"?: ((mode: string) => any) | undefined;
+}, {
+    width: string | number;
+    disabled: boolean;
+    mode: string;
+    rounded: string | number | boolean;
+    dotSize: string | number;
+    modes: string[];
+    canvasHeight: string | number;
+    hideCanvas: boolean;
+    hideSliders: boolean;
+    hideInputs: boolean;
+    showSwatches: boolean;
+    swatchesMaxHeight: string | number;
+}>;
+declare type VColorPicker = InstanceType<typeof VColorPicker>;
+
+export { VColorPicker };

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

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

package/lib/components/VColorPicker/util/index.mjs

@@ -8,8 +8,6 @@ function has(obj, key) {
 }
 
 export function parseColor(color) {
-  var _hsva$a;
-
   if (!color) return null;
   let hsva = null;
 
@@ -29,7 +27,7 @@ export function parseColor(color) {
   }
 
   return hsva != null ? { ...hsva,
-    a: (_hsva$a = hsva.a) != null ? _hsva$a : 1
+    a: hsva.a ?? 1
   } : null;
 }
 

package/lib/components/VColorPicker/util/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/VColorPicker/util/index.ts"],"names":["HexToHSVA","HSLAtoHSVA","HSVAtoHex","HSVAtoHSLA","HSVAtoRGBA","parseHex","RGBAtoHSVA","has","obj","key","every","k","hasOwnProperty","parseColor","color","hsva","hex","a","stripAlpha","rest","extractColor","input","slice","converted","hasAlpha","length","nullColor","h","s","v","rgba","inputProps","type","min","inputs","label","max","step","getValue","c","Math","round","r","getColor","Number","g","b","to","from","rgb","hsla","l","hsl","hexa","modes"],"mappings":"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","sourcesContent":["// Utilities\nimport {\n  HexToHSVA,\n  HSLAtoHSVA,\n  HSVAtoHex,\n  HSVAtoHSLA,\n  HSVAtoRGBA,\n  parseHex,\n  RGBAtoHSVA,\n} from '@/util/colorUtils'\n\n// Types\nimport type {\n  HSLA,\n  HSVA,\n  RGBA,\n} from '@/util/colorUtils'\n\nfunction has (obj: object, key: string[]) {\n  return key.every(k => obj.hasOwnProperty(k))\n}\n\nexport function parseColor (color: any): HSVA | null {\n  if (!color) return null\n\n  let hsva: HSVA | null = null\n\n  if (typeof color === 'string') {\n    const hex = parseHex(color)\n\n    hsva = HexToHSVA(hex)\n  }\n\n  if (typeof color === 'object') {\n    if (has(color, ['r', 'g', 'b'])) {\n      hsva = RGBAtoHSVA(color)\n    } else if (has(color, ['h', 's', 'l'])) {\n      hsva = HSLAtoHSVA(color)\n    } else if (has(color, ['h', 's', 'v'])) {\n      hsva = color\n    }\n  }\n\n  return hsva != null ? { ...hsva, a: hsva.a ?? 1 } : null\n}\n\nfunction stripAlpha (color: any, stripAlpha: boolean) {\n  if (stripAlpha) {\n    const { a, ...rest } = color\n\n    return rest\n  }\n\n  return color\n}\n\nexport function extractColor (color: HSVA, input: any) {\n  if (input == null || typeof input === 'string') {\n    const hex = HSVAtoHex(color)\n\n    if (color.a === 1) return hex.slice(0, 7)\n    else return hex\n  }\n\n  if (typeof input === 'object') {\n    let converted\n\n    if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color)\n    else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color)\n    else if (has(input, ['h', 's', 'v'])) converted = color\n\n    return stripAlpha(converted, !has(input, ['a']))\n  }\n\n  return color\n}\n\nexport function hasAlpha (color: any) {\n  if (!color) return false\n\n  if (typeof color === 'string') {\n    return color.length > 7\n  }\n\n  if (typeof color === 'object') {\n    return has(color, ['a']) || has(color, ['alpha'])\n  }\n\n  return false\n}\n\nexport const nullColor = { h: 0, s: 0, v: 1, a: 1 }\n\nexport type ColorPickerMode = {\n  inputProps: Record<string, unknown>\n  inputs: {\n    [key: string]: any\n    getValue: (color: any) => number | string\n    getColor: (color: any, v: string) => any\n  }[]\n  from: (color: any) => HSVA\n  to: (color: HSVA) => any\n}\n\nconst rgba: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'R',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.r),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, r: Number(v) }),\n    },\n    {\n      label: 'G',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.g),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, g: Number(v) }),\n    },\n    {\n      label: 'B',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.b),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, b: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: (c: RGBA) => Math.round(c.a * 100) / 100,\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVAtoRGBA,\n  from: RGBAtoHSVA,\n}\n\nconst rgb = {\n  ...rgba,\n  inputs: rgba.inputs?.slice(0, 3),\n}\n\nconst hsla: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'H',\n      max: 360,\n      step: 1,\n      getValue: (c: HSLA) => Math.round(c.h),\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, h: Number(v) }),\n    },\n    {\n      label: 'S',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.s * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, s: Number(v) }),\n    },\n    {\n      label: 'L',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.l * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, l: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.a * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVAtoHSLA,\n  from: HSLAtoHSVA,\n}\n\nconst hsl = {\n  ...hsla,\n  inputs: hsla.inputs.slice(0, 3),\n}\n\nconst hexa: ColorPickerMode = {\n  inputProps: {\n    type: 'text',\n  },\n  inputs: [\n    {\n      label: 'HEXA',\n      getValue: (c: string) => c,\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n  to: HSVAtoHex,\n  from: HexToHSVA,\n}\n\nconst hex = {\n  ...hexa,\n  inputs: [\n    {\n      label: 'HEX',\n      getValue: (c: string) => c.slice(0, 7),\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n}\n\nexport const modes: Record<string, ColorPickerMode> = {\n  rgb,\n  rgba,\n  hsl,\n  hsla,\n  hex,\n  hexa,\n}\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["HexToHSVA","HSLAtoHSVA","HSVAtoHex","HSVAtoHSLA","HSVAtoRGBA","parseHex","RGBAtoHSVA","has","obj","key","every","k","hasOwnProperty","parseColor","color","hsva","hex","a","stripAlpha","rest","extractColor","input","slice","converted","hasAlpha","length","nullColor","h","s","v","rgba","inputProps","type","min","inputs","label","max","step","getValue","c","Math","round","r","getColor","Number","g","b","to","from","rgb","hsla","l","hsl","hexa","modes"],"sources":["../../../../src/components/VColorPicker/util/index.ts"],"sourcesContent":["// Utilities\nimport {\n  HexToHSVA,\n  HSLAtoHSVA,\n  HSVAtoHex,\n  HSVAtoHSLA,\n  HSVAtoRGBA,\n  parseHex,\n  RGBAtoHSVA,\n} from '@/util/colorUtils'\n\n// Types\nimport type {\n  HSLA,\n  HSVA,\n  RGBA,\n} from '@/util/colorUtils'\n\nfunction has (obj: object, key: string[]) {\n  return key.every(k => obj.hasOwnProperty(k))\n}\n\nexport function parseColor (color: any): HSVA | null {\n  if (!color) return null\n\n  let hsva: HSVA | null = null\n\n  if (typeof color === 'string') {\n    const hex = parseHex(color)\n\n    hsva = HexToHSVA(hex)\n  }\n\n  if (typeof color === 'object') {\n    if (has(color, ['r', 'g', 'b'])) {\n      hsva = RGBAtoHSVA(color)\n    } else if (has(color, ['h', 's', 'l'])) {\n      hsva = HSLAtoHSVA(color)\n    } else if (has(color, ['h', 's', 'v'])) {\n      hsva = color\n    }\n  }\n\n  return hsva != null ? { ...hsva, a: hsva.a ?? 1 } : null\n}\n\nfunction stripAlpha (color: any, stripAlpha: boolean) {\n  if (stripAlpha) {\n    const { a, ...rest } = color\n\n    return rest\n  }\n\n  return color\n}\n\nexport function extractColor (color: HSVA, input: any) {\n  if (input == null || typeof input === 'string') {\n    const hex = HSVAtoHex(color)\n\n    if (color.a === 1) return hex.slice(0, 7)\n    else return hex\n  }\n\n  if (typeof input === 'object') {\n    let converted\n\n    if (has(input, ['r', 'g', 'b'])) converted = HSVAtoRGBA(color)\n    else if (has(input, ['h', 's', 'l'])) converted = HSVAtoHSLA(color)\n    else if (has(input, ['h', 's', 'v'])) converted = color\n\n    return stripAlpha(converted, !has(input, ['a']))\n  }\n\n  return color\n}\n\nexport function hasAlpha (color: any) {\n  if (!color) return false\n\n  if (typeof color === 'string') {\n    return color.length > 7\n  }\n\n  if (typeof color === 'object') {\n    return has(color, ['a']) || has(color, ['alpha'])\n  }\n\n  return false\n}\n\nexport const nullColor = { h: 0, s: 0, v: 1, a: 1 }\n\nexport type ColorPickerMode = {\n  inputProps: Record<string, unknown>\n  inputs: {\n    [key: string]: any\n    getValue: (color: any) => number | string\n    getColor: (color: any, v: string) => any\n  }[]\n  from: (color: any) => HSVA\n  to: (color: HSVA) => any\n}\n\nconst rgba: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'R',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.r),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, r: Number(v) }),\n    },\n    {\n      label: 'G',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.g),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, g: Number(v) }),\n    },\n    {\n      label: 'B',\n      max: 255,\n      step: 1,\n      getValue: (c: RGBA) => Math.round(c.b),\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, b: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: (c: RGBA) => Math.round(c.a * 100) / 100,\n      getColor: (c: RGBA, v: string): RGBA => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVAtoRGBA,\n  from: RGBAtoHSVA,\n}\n\nconst rgb = {\n  ...rgba,\n  inputs: rgba.inputs?.slice(0, 3),\n}\n\nconst hsla: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'H',\n      max: 360,\n      step: 1,\n      getValue: (c: HSLA) => Math.round(c.h),\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, h: Number(v) }),\n    },\n    {\n      label: 'S',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.s * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, s: Number(v) }),\n    },\n    {\n      label: 'L',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.l * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, l: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSLA) => Math.round(c.a * 100) / 100,\n      getColor: (c: HSLA, v: string): HSLA => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVAtoHSLA,\n  from: HSLAtoHSVA,\n}\n\nconst hsl = {\n  ...hsla,\n  inputs: hsla.inputs.slice(0, 3),\n}\n\nconst hexa: ColorPickerMode = {\n  inputProps: {\n    type: 'text',\n  },\n  inputs: [\n    {\n      label: 'HEXA',\n      getValue: (c: string) => c,\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n  to: HSVAtoHex,\n  from: HexToHSVA,\n}\n\nconst hex = {\n  ...hexa,\n  inputs: [\n    {\n      label: 'HEX',\n      getValue: (c: string) => c.slice(0, 7),\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n}\n\nexport const modes: Record<string, ColorPickerMode> = {\n  rgb,\n  rgba,\n  hsl,\n  hsla,\n  hex,\n  hexa,\n}\n"],"mappings":"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"}

package/lib/components/VCombobox/VCombobox.css

@@ -17,10 +17,15 @@
 .v-combobox .v-field--dirty .v-combobox__selection {
   margin-inline-end: 2px;
 }
+.v-combobox .v-field--single-line .v-combobox__selection-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .v-combobox__content {
   overflow: hidden;
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
   border-radius: 4px;
 }
 .v-combobox__mask {
@@ -30,11 +35,15 @@
   display: inline-flex;
   letter-spacing: inherit;
   line-height: inherit;
+  max-width: 100%;
 }
 .v-combobox--active-menu .v-field__append-inner > .v-icon {
   opacity: var(--v-high-emphasis-opacity);
   transform: rotate(180deg);
 }
+.v-combobox--chips .v-combobox__selection {
+  margin-top: 2px;
+}
 .v-combobox--chips .v-combobox__selection:first-child {
   margin-inline-start: 0;
 }
@@ -52,6 +61,7 @@
   position: absolute;
   left: 0;
   right: 0;
+  width: 100%;
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }

package/lib/components/VCombobox/VCombobox.mjs

@@ -1,8 +1,9 @@
-import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VCombobox.css"; // Components
 
-import { genItem, makeSelectProps } from "../VSelect/VSelect.mjs";
+import { makeSelectProps } from "../VSelect/VSelect.mjs";
+import { VCheckboxBtn } from "../VCheckbox/index.mjs";
 import { VChip } from "../VChip/index.mjs";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VList, VListItem } from "../VList/index.mjs";
@@ -11,12 +12,13 @@ import { VTextField } from "../VTextField/index.mjs"; // Composables
 
 import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
-import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { transformItem, useItems } from "../../composables/items.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utility
 
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, mergeProps, nextTick, ref, watch } from 'vue';
 import { genericComponent, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 
 function highlightResult(text, matches, length) {
@@ -40,52 +42,64 @@ export const VCombobox = genericComponent()({
       filterKeys: ['title']
     }),
     ...makeSelectProps({
-      hideNoData: true
+      hideNoData: true,
+      returnObject: true
     }),
     ...makeTransitionProps({
       transition: false
     })
   },
   emits: {
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:searchInput': val => true,
+    'update:menu': val => true
   },
 
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const {
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const activator = ref();
     const isFocused = ref(false);
     const isPristine = ref(true);
-    const menu = ref(false);
+    const menu = useProxiedModel(props, 'menu');
     const selectionIndex = ref(-1);
     const color = computed(() => {
       var _vTextFieldRef$value;
 
       return (_vTextFieldRef$value = vTextFieldRef.value) == null ? void 0 : _vTextFieldRef$value.color;
     });
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items,
+      transformIn,
+      transformOut
+    } = useItems(props);
     const {
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
-    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
+    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v || [])), v => {
+      const transformed = transformOut(v);
+      return props.multiple ? transformed : transformed[0] ?? null;
+    });
 
     const _search = ref('');
 
     const search = computed({
-      get: () => props.multiple ? _search.value : genItem(model.value[0]).value,
+      get: () => {
+        return _search.value;
+      },
       set: val => {
         var _props$delimiters;
 
-        if (props.multiple) {
-          _search.value = val;
-        } else {
-          model.value = [val];
+        _search.value = val;
+
+        if (!props.multiple) {
+          model.value = [transformItem(props, val)];
         }
 
         if (val && props.multiple && (_props$delimiters = props.delimiters) != null && _props$delimiters.length) {
@@ -94,9 +108,7 @@ export const VCombobox = genericComponent()({
           if (values.length > 1) {
             values.forEach(v => {
               v = v.trim();
-              if (v) select({
-                value: v
-              });
+              if (v) select(transformItem(props, v));
             });
             _search.value = '';
           }
@@ -107,29 +119,18 @@ export const VCombobox = genericComponent()({
         isPristine.value = !val;
       }
     });
+    watch(_search, value => {
+      emit('update:searchInput', value);
+    });
     const {
       filteredItems
     } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value));
     const selections = computed(() => {
-      const array = [];
-      let index = 0;
-
-      for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
-        const found = array.find(selection => selection.value === item.value);
-
-        if (found == null) {
-          array.push({ ...item,
-            index,
-            selected: index === selectionIndex.value
-          });
-          index++;
-        }
-      }
-
-      return array;
+      return model.value.map(v => {
+        return items.value.find(item => item.value === v.value) || v;
+      });
     });
-    const selected = computed(() => selections.value.map(selection => selection.value));
+    const selected = computed(() => selections.value.map(selection => selection.props.value));
     const selection = computed(() => selections.value[selectionIndex.value]);
 
     function onClear(e) {
@@ -141,11 +142,12 @@ export const VCombobox = genericComponent()({
     }
 
     function onClickControl() {
-      if (props.hideNoData && !filteredItems.value.length) return;
+      if (props.hideNoData && !items.value.length || props.readonly) return;
       menu.value = true;
     }
 
     function onKeydown(e) {
+      if (props.readonly) return;
       const selectionStart = vTextFieldRef.value.selectionStart;
       const length = selected.value.length;
       if (selectionIndex.value > -1) e.preventDefault();
@@ -202,9 +204,7 @@ export const VCombobox = genericComponent()({
       }
 
       if (e.key === 'Enter') {
-        select({
-          value: search.value
-        });
+        select(transformItem(props, search.value));
         search.value = '';
       }
     }
@@ -215,12 +215,14 @@ export const VCombobox = genericComponent()({
 
     function select(item) {
       if (props.multiple) {
-        const index = selections.value.findIndex(selection => selection.value === item.value);
+        const index = selected.value.findIndex(selection => selection === item.value);
 
         if (index === -1) {
-          model.value.push(item.value);
+          model.value = [...model.value, item];
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
 
         search.value = '';
@@ -234,9 +236,6 @@ export const VCombobox = genericComponent()({
       }
     }
 
-    watch(() => vTextFieldRef.value, val => {
-      activator.value = val.$el.querySelector('.v-input__control');
-    });
     watch(filteredItems, val => {
       if (!val.length && props.hideNoData) menu.value = false;
     });
@@ -246,7 +245,7 @@ export const VCombobox = genericComponent()({
       } else {
         menu.value = false;
         if (!props.multiple || !search.value) return;
-        model.value.push(search.value);
+        model.value = [...model.value, transformItem(props, search.value)];
         search.value = '';
       }
     });
@@ -255,7 +254,11 @@ export const VCombobox = genericComponent()({
       return _createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onUpdate:modelValue": [$event => search.value = $event, v => {
+          if (v == null) model.value = [];
+        }],
+        "validationValue": model.externalValue,
+        "dirty": model.value.length > 0,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
           'v-combobox--chips': !!props.chips,
@@ -263,7 +266,7 @@ export const VCombobox = genericComponent()({
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
         }],
         "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
-        "dirty": selected.value.length > 0,
+        "readonly": props.readonly,
         "onClick:clear": onClear,
         "onClick:control": onClickControl,
         "onClick:input": onClickControl,
@@ -271,78 +274,104 @@ export const VCombobox = genericComponent()({
         "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }, { ...slots,
-        default: () => _createVNode(_Fragment, null, [activator.value && _createVNode(VMenu, {
-          "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
-          "activator": activator.value,
-          "contentClass": "v-combobox__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition,
-          "onAfterLeave": onAfterLeave
-        }, {
-          default: () => [_createVNode(VList, {
-            "selected": selected.value,
-            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
-          }, {
-            default: () => [!filteredItems.value.length && !props.hideNoData && _createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), filteredItems.value.map(_ref2 => {
-              let {
-                item,
-                matches
-              } = _ref2;
-              return _createVNode(VListItem, {
-                "value": item.value,
-                "onMousedown": e => e.preventDefault(),
-                "onClick": () => select(item)
-              }, {
-                title: () => {
-                  var _search$value$length, _search$value;
-
-                  return isPristine.value ? item.title : highlightResult(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
-                }
-              });
+        default: () => {
+          var _slots$noData;
+
+          return _createVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "contentClass": "v-combobox__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "closeOnContentClick": false,
+            "transition": props.transition,
+            "onAfterLeave": onAfterLeave
+          }, props.menuProps), {
+            default: () => [_createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent',
+              "onMousedown": e => e.preventDefault()
+            }, {
+              default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? _createVNode(VListItem, {
+                "title": t(props.noDataText)
+              }, null)), filteredItems.value.map((_ref2, index) => {
+                var _slots$item;
+
+                let {
+                  item,
+                  matches
+                } = _ref2;
+                return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
+                  item,
+                  index,
+                  props: mergeProps(item.props, {
+                    onClick: () => select(item)
+                  })
+                })) ?? _createVNode(VListItem, _mergeProps({
+                  "key": index
+                }, item.props, {
+                  "onClick": () => select(item)
+                }), {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
+                      "modelValue": isSelected,
+                      "ripple": false
+                    }, null) : undefined;
+                  },
+                  title: () => {
+                    var _search$value;
+
+                    return isPristine.value ? item.title : highlightResult(item.title, matches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
+                  }
+                });
+              })]
             })]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+          }), selections.value.map((item, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(item);
+            }
 
-          const slotProps = {
-            'onClick:close': onChipClose,
-            modelValue: true
-          };
-          return _createVNode("div", {
-            "class": ['v-combobox__selection', selection.selected && ['v-combobox__selection--selected', textColorClasses.value]],
-            "style": selection.selected ? textColorStyles.value : {}
-          }, [hasChips && _createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return _createVNode("div", {
+              "key": index,
+              "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
+              "style": index === selectionIndex.value ? textColorStyles.value : {}
+            }, [hasChips ? _createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: item.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
-              selection
-            }) : _createVNode(VChip, slotProps, null)]
-          }), !hasChips && (slots.selection ? slots.selection({
-            selection
-          }) : _createVNode("span", {
-            "class": "v-combobox__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
-            "class": "v-combobox__selection-comma"
-          }, [_createTextVNode(",")])]))]);
-        })])
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                item,
+                index,
+                props: slotProps
+              }) : _createVNode(VChip, slotProps, null)]
+            }) : slots.selection ? slots.selection({
+              item,
+              index
+            }) : _createVNode("span", {
+              "class": "v-combobox__selection-text"
+            }, [item.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+              "class": "v-combobox__selection-comma"
+            }, [_createTextVNode(",")])])]);
+          })]);
+        }
       });
     });
-    return useForwardRef({
+    return forwardRefs({
       isFocused,
       isPristine,
       menu,