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

package/lib/components/VAppBar/VAppBarNavIcon.mjs

@@ -1,13 +1,15 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Components
-import { VBtn } from "../VBtn/index.mjs"; // Utilities
+import { VBtn } from "../VBtn/index.mjs"; // Composables
 
-import { defineComponent } from "../../util/index.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
+
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VAppBarNavIcon = defineComponent({
   name: 'VAppBarNavIcon',
   props: {
     icon: {
-      type: String,
+      type: IconValue,
       default: '$menu'
     }
   },
@@ -16,16 +18,11 @@ export const VAppBarNavIcon = defineComponent({
     let {
       slots
     } = _ref;
-    return () => {
-      var _slots$default;
-
-      return _createVNode(VBtn, {
-        "class": "v-app-bar-nav-icon",
-        "icon": props.icon
-      }, {
-        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-      });
-    };
+    useRender(() => _createVNode(VBtn, {
+      "class": "v-app-bar-nav-icon",
+      "icon": props.icon
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VAppBar/VAppBarNavIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"names":["VBtn","defineComponent","VAppBarNavIcon","name","props","icon","type","String","default","setup","slots"],"mappings":";AAAA;SACSA,I,6BAET;;SACSC,e;AAET,OAAO,MAAMC,cAAc,GAAGD,eAAe,CAAC;AAC5CE,EAAAA,IAAI,EAAE,gBADsC;AAG5CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAEC,MADF;AAEJC,MAAAA,OAAO,EAAE;AAFL;AADD,GAHqC;;AAU5CC,EAAAA,KAAK,CAAEL,KAAF,QAAoB;AAAA,QAAX;AAAEM,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA;;AAAA;AAAA,iBACO,oBADP;AAAA,gBACmCN,KAAK,CAACC;AADzC;AAAA,0CAEDK,KAAK,CAACF,OAFL,qBAED,oBAAAE,KAAK,CAFJ;AAAA;AAAA,KAAP;AAKD;;AAhB2C,CAAD,CAAtC","sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarNavIcon = defineComponent({\n  name: 'VAppBarNavIcon',\n\n  props: {\n    icon: {\n      type: String,\n      default: '$menu',\n    },\n  },\n\n  setup (props, { slots }) {\n    return () => (\n      <VBtn class=\"v-app-bar-nav-icon\" icon={ props.icon }>\n        { slots.default?.() }\n      </VBtn>\n    )\n  },\n})\n"],"file":"VAppBarNavIcon.mjs"}
+{"version":3,"file":"VAppBarNavIcon.mjs","names":["VBtn","IconValue","defineComponent","useRender","VAppBarNavIcon","name","props","icon","type","default","setup","slots"],"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VAppBarNavIcon = defineComponent({\n  name: 'VAppBarNavIcon',\n\n  props: {\n    icon: {\n      type: IconValue,\n      default: '$menu',\n    },\n  },\n\n  setup (props, { slots }) {\n    useRender(() => (\n      <VBtn\n        class=\"v-app-bar-nav-icon\"\n        icon={ props.icon }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,I,6BAET;;SACSC,S,uCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,cAAc,GAAGF,eAAe,CAAC;EAC5CG,IAAI,EAAE,gBADsC;EAG5CC,KAAK,EAAE;IACLC,IAAI,EAAE;MACJC,IAAI,EAAEP,SADF;MAEJQ,OAAO,EAAE;IAFL;EADD,CAHqC;;EAU5CC,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvBR,SAAS,CAAC;MAAA,SAEA,oBAFA;MAAA,QAGCG,KAAK,CAACC;IAHP,GAIII,KAJJ,CAAD,CAAT;IAQA,OAAO,EAAP;EACD;;AApB2C,CAAD,CAAtC"}

package/lib/components/VAppBar/VAppBarTitle.mjs

@@ -2,17 +2,20 @@ import { createVNode as _createVNode, resolveDirective as _resolveDirective } fr
 // Composables
 import { VToolbarTitle } from "../VToolbar/index.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
-export const VAppBarTitle = defineComponent({ ...VToolbarTitle,
+import { defineComponent, useRender } from "../../util/index.mjs";
+export const VAppBarTitle = defineComponent({
   name: 'VAppBarTitle',
+  props: { ...VToolbarTitle.props
+  },
 
   setup(_, _ref) {
     let {
       slots
     } = _ref;
-    return () => _createVNode(VToolbarTitle, {
+    useRender(() => _createVNode(VToolbarTitle, {
       "class": "v-app-bar-title"
-    }, slots);
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VAppBar/VAppBarTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"names":["VToolbarTitle","defineComponent","VAppBarTitle","name","setup","_","slots"],"mappings":";AAAA;SACSA,a,iCAET;;SACSC,e;AAET,OAAO,MAAMC,YAAY,GAAGD,eAAe,CAAC,EAC1C,GAAGD,aADuC;AAG1CG,EAAAA,IAAI,EAAE,cAHoC;;AAK1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnB,WAAO;AAAA,eAEG;AAFH,OAGOA,KAHP,CAAP;AAMD;;AAZyC,CAAD,CAApC","sourcesContent":["// Composables\nimport { VToolbarTitle } from '@/components/VToolbar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarTitle = defineComponent({\n  ...VToolbarTitle,\n\n  name: 'VAppBarTitle',\n\n  setup (_, { slots }) {\n    return () => (\n      <VToolbarTitle\n        class=\"v-app-bar-title\"\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VAppBarTitle.mjs"}
+{"version":3,"file":"VAppBarTitle.mjs","names":["VToolbarTitle","defineComponent","useRender","VAppBarTitle","name","props","setup","_","slots"],"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"sourcesContent":["// Composables\nimport { VToolbarTitle } from '@/components/VToolbar'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VAppBarTitle = defineComponent({\n  name: 'VAppBarTitle',\n\n  props: { ...VToolbarTitle.props },\n\n  setup (_, { slots }) {\n    useRender(() => (\n      <VToolbarTitle\n        class=\"v-app-bar-title\"\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,a,iCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC;EAC1CG,IAAI,EAAE,cADoC;EAG1CC,KAAK,EAAE,EAAE,GAAGL,aAAa,CAACK;EAAnB,CAHmC;;EAK1CC,KAAK,CAAEC,CAAF,QAAgB;IAAA,IAAX;MAAEC;IAAF,CAAW;IACnBN,SAAS,CAAC;MAAA,SAEA;IAFA,GAGIM,KAHJ,CAAD,CAAT;IAOA,OAAO,EAAP;EACD;;AAdyC,CAAD,CAApC"}

package/lib/components/VAppBar/_variables.scss

@@ -2,6 +2,7 @@
 @use "../../styles/settings/variables";
 @use "../../styles/tools/functions";
 
+// VAppBar
 $app-bar-background: rgb(var(--v-theme-surface)) !default;
 $app-bar-border-color: variables.$border-color-root !default;
 $app-bar-border-radius: map.get(variables.$rounded, '0') !default;
@@ -29,6 +30,7 @@ $app-bar-title-font-size: functions.map-deep-get(variables.$typography, 'h5', 's
 $app-bar-title-padding: 6px 20px !default;
 $app-bar-transition: .2s variables.$standard-easing !default;
 
+// Lists
 $app-bar-border: (
   $app-bar-border-color,
   $app-bar-border-style,

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

@@ -0,0 +1,156 @@
+import * as vue from 'vue';
+import { PropType, JSXComponent } from 'vue';
+
+declare const VAppBar: vue.DefineComponent<{
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    collapse: BooleanConstructor;
+    color: StringConstructor;
+    density: {
+        type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    extended: BooleanConstructor;
+    extensionHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    flat: BooleanConstructor;
+    floating: BooleanConstructor;
+    image: StringConstructor;
+    title: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    location: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: boolean) => true;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    collapse: BooleanConstructor;
+    color: StringConstructor;
+    density: {
+        type: PropType<"default" | "compact" | "prominent" | "comfortable" | null>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    extended: BooleanConstructor;
+    extensionHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    flat: BooleanConstructor;
+    floating: BooleanConstructor;
+    image: StringConstructor;
+    title: StringConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    location: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+        validator: (value: any) => boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {
+    flat: boolean;
+    absolute: boolean;
+    location: "top" | "bottom";
+    height: string | number;
+    order: string | number;
+    tag: string;
+    collapse: boolean;
+    rounded: string | number | boolean;
+    density: "default" | "compact" | "prominent" | "comfortable" | null;
+    extended: boolean;
+    extensionHeight: string | number;
+    floating: boolean;
+    modelValue: boolean;
+}>;
+declare type VAppBar = InstanceType<typeof VAppBar>;
+
+declare type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
+
+declare const VAppBarNavIcon: vue.DefineComponent<{
+    icon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    icon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+}>>, {
+    icon: IconValue;
+}>;
+
+declare const VAppBarTitle: vue.DefineComponent<any, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}>;
+
+export { VAppBar, VAppBarNavIcon, VAppBarTitle };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/index.ts"],"names":["VAppBar","VAppBarNavIcon","VAppBarTitle"],"mappings":"SAASA,O;SACAC,c;SACAC,Y","sourcesContent":["export { VAppBar } from './VAppBar'\nexport { VAppBarNavIcon } from './VAppBarNavIcon'\nexport { VAppBarTitle } from './VAppBarTitle'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VAppBar","VAppBarNavIcon","VAppBarTitle"],"sources":["../../../src/components/VAppBar/index.ts"],"sourcesContent":["export { VAppBar } from './VAppBar'\nexport { VAppBarNavIcon } from './VAppBarNavIcon'\nexport { VAppBarTitle } from './VAppBarTitle'\n"],"mappings":"SAASA,O;SACAC,c;SACAC,Y"}

package/lib/components/VAutocomplete/VAutocomplete.css

@@ -17,10 +17,15 @@
 .v-autocomplete .v-field--dirty .v-autocomplete__selection {
   margin-inline-end: 2px;
 }
+.v-autocomplete .v-field--single-line .v-autocomplete__selection-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .v-autocomplete__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-autocomplete__mask {
@@ -30,11 +35,15 @@
   display: inline-flex;
   letter-spacing: inherit;
   line-height: inherit;
+  max-width: 100%;
 }
 .v-autocomplete--active-menu .v-field__append-inner > .v-icon {
   opacity: var(--v-high-emphasis-opacity);
   transform: rotate(180deg);
 }
+.v-autocomplete--chips .v-autocomplete__selection {
+  margin-top: 2px;
+}
 .v-autocomplete--chips .v-autocomplete__selection:first-child {
   margin-inline-start: 0;
 }
@@ -43,6 +52,7 @@
   position: absolute;
   left: 0;
   right: 0;
+  width: 100%;
   padding-inline-start: inherit;
   padding-inline-end: inherit;
 }

package/lib/components/VAutocomplete/VAutocomplete.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 "./VAutocomplete.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,11 +12,12 @@ 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 { forwardRefs } from "../../composables/forwardRefs.mjs";
+import { useItems } from "../../composables/items.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.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) {
@@ -44,9 +46,9 @@ export const VAutocomplete = genericComponent()({
     })
   },
   emits: {
-    'click:clear': e => true,
     'update:search': val => true,
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:menu': val => true
   },
 
   setup(props, _ref) {
@@ -57,35 +59,28 @@ export const VAutocomplete = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const activator = ref();
     const isFocused = ref(false);
     const isPristine = ref(true);
-    const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const menu = useProxiedModel(props, 'menu');
+    const {
+      items,
+      transformIn,
+      transformOut
+    } = useItems(props);
     const search = useProxiedModel(props, 'search', '');
-    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 {
       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
-          });
-          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));
 
     function onClear(e) {
       model.value = [];
@@ -98,11 +93,13 @@ export const VAutocomplete = 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;
+
       if (['Enter', 'ArrowDown'].includes(e.key)) {
         menu.value = true;
       }
@@ -116,6 +113,10 @@ export const VAutocomplete = genericComponent()({
       }
     }
 
+    function onInput(e) {
+      search.value = e.target.value;
+    }
+
     function onAfterLeave() {
       if (isFocused.value) isPristine.value = true;
     }
@@ -124,15 +125,18 @@ export const VAutocomplete = 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];
+          search.value = '';
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
       } else {
-        model.value = [item.value];
+        model.value = [item];
         isSelecting.value = true;
         search.value = item.title;
         menu.value = false;
@@ -141,15 +145,12 @@ export const VAutocomplete = genericComponent()({
       }
     }
 
-    watch(() => vTextFieldRef.value, val => {
-      activator.value = val.$el.querySelector('.v-input__control');
-    });
     watch(isFocused, val => {
       if (val) {
-        var _model$value;
+        var _selections$value$at;
 
         isSelecting.value = true;
-        search.value = props.multiple ? '' : String((_model$value = model.value) != null ? _model$value : '');
+        search.value = props.multiple ? '' : String(((_selections$value$at = selections.value.at(-1)) == null ? void 0 : _selections$value$at.props.title) ?? '');
         isPristine.value = true;
         nextTick(() => isSelecting.value = false);
       } else {
@@ -167,14 +168,19 @@ export const VAutocomplete = genericComponent()({
       return _createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onUpdate:modelValue": v => {
+          if (v == null) model.value = [];
+        },
+        "validationValue": model.externalValue,
+        "dirty": model.value.length > 0,
+        "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true
         }],
         "appendInnerIcon": props.menuIcon,
-        "dirty": selected.value.length > 0,
+        "readonly": props.readonly,
         "onClick:clear": onClear,
         "onClick:control": onClickControl,
         "onClick:input": onClickControl,
@@ -182,78 +188,109 @@ export const VAutocomplete = 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-autocomplete__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;
+        default: () => {
+          var _slots$noData;
 
-                  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);
-                }
-              });
+          return _createVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "contentClass": "v-autocomplete__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-autocomplete__selection"
-          }, [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-autocomplete__selection"
+            }, [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-autocomplete__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
-            "class": "v-autocomplete__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-autocomplete__selection-text"
+            }, [item.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+              "class": "v-autocomplete__selection-comma"
+            }, [_createTextVNode(",")])])]);
+          })]);
+        }
       });
     });
-    return useForwardRef({
-      filteredItems
+    return forwardRefs({
+      isFocused,
+      isPristine,
+      menu,
+      search,
+      filteredItems,
+      select
     }, vTextFieldRef);
   }