@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VSelect/VSelect.mjs

@@ -1,807 +1,216 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "../VTextField/VTextField.sass";
-import "./VSelect.sass"; // Components
-
-import VChip from "../VChip/index.mjs";
-import VMenu from "../VMenu/index.mjs";
-import VSelectList from "./VSelectList.mjs"; // Extensions
-
-import VInput from "../VInput/index.mjs";
-import VTextField from "../VTextField/VTextField.mjs"; // Mixins
-
-import Comparable from "../../mixins/comparable/index.mjs";
-import Dependent from "../../mixins/dependent/index.mjs";
-import Filterable from "../../mixins/filterable/index.mjs"; // Directives
-
-import ClickOutside from "../../directives/click-outside/index.mjs"; // Utilities
-
-import mergeData from "../../util/mergeData.mjs";
-import { getPropertyFromItem, getObjectValueByPath, keyCodes } from "../../util/helpers.mjs";
-import { consoleError } from "../../util/console.mjs"; // Types
-
-import mixins from "../../util/mixins.mjs";
-export const defaultMenuProps = {
-  closeOnClick: false,
-  closeOnContentClick: false,
-  disableKeys: true,
-  openOnClick: false,
-  maxHeight: 304
-}; // Types
-
-const baseMixins = mixins(VTextField, Comparable, Dependent, Filterable);
-
-/* @vue/component */
-export default baseMixins.extend().extend({
-  name: 'v-select',
-  directives: {
-    ClickOutside
+import "./VSelect.css"; // Components
+
+import { VChip } from "../VChip/index.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VList, VListItem } from "../VList/index.mjs";
+import { VMenu } from "../VMenu/index.mjs";
+import { VTextField } from "../VTextField/index.mjs"; // Composables
+
+import { makeTransitionProps } from "../../composables/transition.mjs";
+import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { useLocale } from "../../composables/locale.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
+
+import { computed, ref, watch } from 'vue';
+import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+
+export function genItem(item) {
+  var _ref;
+
+  return {
+    title: String((_ref = typeof item === 'object' ? item.title : item) != null ? _ref : ''),
+    value: typeof item === 'object' ? item.value : item
+  };
+}
+export const makeSelectProps = propsFactory({
+  chips: Boolean,
+  closableChips: Boolean,
+  eager: Boolean,
+  hideNoData: Boolean,
+  hideSelected: Boolean,
+  items: {
+    type: Array,
+    default: () => []
   },
-  props: {
-    appendIcon: {
-      type: String,
-      default: '$dropdown'
-    },
-    attach: {
-      type: null,
-      default: false
-    },
-    cacheItems: Boolean,
-    chips: Boolean,
-    clearable: Boolean,
-    deletableChips: Boolean,
-    disableLookup: Boolean,
-    eager: Boolean,
-    hideSelected: Boolean,
-    items: {
-      type: Array,
-      default: () => []
-    },
-    itemColor: {
-      type: String,
-      default: 'primary'
-    },
-    itemDisabled: {
-      type: [String, Array, Function],
-      default: 'disabled'
-    },
-    itemText: {
-      type: [String, Array, Function],
-      default: 'text'
-    },
-    itemValue: {
-      type: [String, Array, Function],
-      default: 'value'
-    },
-    menuProps: {
-      type: [String, Array, Object],
-      default: () => defaultMenuProps
-    },
-    multiple: Boolean,
-    openOnClear: Boolean,
-    returnObject: Boolean,
-    smallChips: Boolean
+  menuIcon: {
+    type: String,
+    default: '$dropdown'
   },
-
-  data() {
-    return {
-      cachedItems: this.cacheItems ? this.items : [],
-      menuIsBooted: false,
-      isMenuActive: false,
-      lastItem: 20,
-      // As long as a value is defined, show it
-      // Otherwise, check if multiple
-      // to determine which default to provide
-      lazyValue: this.value !== undefined ? this.value : this.multiple ? [] : undefined,
-      selectedIndex: -1,
-      selectedItems: [],
-      keyboardLookupPrefix: '',
-      keyboardLookupLastTime: 0
-    };
+  modelValue: {
+    type: [Number, String, Array],
+    default: () => []
   },
-
-  computed: {
-    /* All items that the select has */
-    allItems() {
-      return this.filterDuplicates(this.cachedItems.concat(this.items));
-    },
-
-    classes() {
-      return { ...VTextField.options.computed.classes.call(this),
-        'v-select': true,
-        'v-select--chips': this.hasChips,
-        'v-select--chips--small': this.smallChips,
-        'v-select--is-menu-active': this.isMenuActive,
-        'v-select--is-multi': this.multiple
-      };
-    },
-
-    /* Used by other components to overwrite */
-    computedItems() {
-      return this.allItems;
-    },
-
-    computedOwns() {
-      return `list-${this._uid}`;
-    },
-
-    computedCounterValue() {
-      const value = this.multiple ? this.selectedItems : (this.getText(this.selectedItems[0]) || '').toString();
-
-      if (typeof this.counterValue === 'function') {
-        return this.counterValue(value);
-      }
-
-      return value.length;
-    },
-
-    directives() {
-      return this.isFocused ? [{
-        name: 'click-outside',
-        value: {
-          handler: this.blur,
-          closeConditional: this.closeConditional,
-          include: () => this.getOpenDependentElements()
-        }
-      }] : undefined;
-    },
-
-    dynamicHeight() {
-      return 'auto';
-    },
-
-    hasChips() {
-      return this.chips || this.smallChips;
-    },
-
-    hasSlot() {
-      return Boolean(this.hasChips || this.$scopedSlots.selection);
-    },
-
-    isDirty() {
-      return this.selectedItems.length > 0;
-    },
-
-    listData() {
-      const scopeId = this.$vnode && this.$vnode.context.$options._scopeId;
-      const attrs = scopeId ? {
-        [scopeId]: true
-      } : {};
-      return {
-        attrs: { ...attrs,
-          id: this.computedOwns
-        },
-        props: {
-          action: this.multiple,
-          color: this.itemColor,
-          dense: this.dense,
-          hideSelected: this.hideSelected,
-          items: this.virtualizedItems,
-          itemDisabled: this.itemDisabled,
-          itemText: this.itemText,
-          itemValue: this.itemValue,
-          noDataText: this.$vuetify.lang.t(this.noDataText),
-          selectedItems: this.selectedItems
-        },
-        on: {
-          select: this.selectItem
-        },
-        scopedSlots: {
-          item: this.$scopedSlots.item
-        }
-      };
-    },
-
-    staticList() {
-      if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
-        consoleError('assert: staticList should not be called if slots are used');
-      }
-
-      return this.$createElement(VSelectList, this.listData);
-    },
-
-    virtualizedItems() {
-      return this.$_menuProps.auto ? this.computedItems : this.computedItems.slice(0, this.lastItem);
-    },
-
-    menuCanShow: () => true,
-
-    $_menuProps() {
-      let normalisedProps = typeof this.menuProps === 'string' ? this.menuProps.split(',') : this.menuProps;
-
-      if (Array.isArray(normalisedProps)) {
-        normalisedProps = normalisedProps.reduce((acc, p) => {
-          acc[p.trim()] = true;
-          return acc;
-        }, {});
-      }
-
-      return { ...defaultMenuProps,
-        eager: this.eager,
-        value: this.menuCanShow && this.isMenuActive,
-        nudgeBottom: normalisedProps.offsetY ? 1 : 0,
-        // convert to int
-        ...normalisedProps
-      };
-    }
-
+  multiple: Boolean,
+  noDataText: {
+    type: String,
+    default: '$vuetify.noDataText'
   },
-  watch: {
-    internalValue(val) {
-      this.initialValue = val;
-      this.setSelectedItems();
-    },
-
-    isMenuActive(val) {
-      window.setTimeout(() => this.onMenuActiveChange(val));
-    },
-
-    items: {
-      immediate: true,
-
-      handler(val) {
-        if (this.cacheItems) {
-          // Breaks vue-test-utils if
-          // this isn't calculated
-          // on the next tick
-          this.$nextTick(() => {
-            this.cachedItems = this.filterDuplicates(this.cachedItems.concat(val));
-          });
-        }
-
-        this.setSelectedItems();
-      }
-
-    }
+  openOnClear: Boolean
+}, 'select');
+export const VSelect = genericComponent()({
+  name: 'VSelect',
+  props: { ...makeSelectProps(),
+    ...makeTransitionProps({
+      transition: 'scale-transition'
+    })
+  },
+  emits: {
+    'update:modelValue': val => true
   },
-  methods: {
-    /** @public */
-    blur(e) {
-      VTextField.options.methods.blur.call(this, e);
-      this.isMenuActive = false;
-      this.isFocused = false;
-      this.selectedIndex = -1;
-      this.setMenuIndex(-1);
-    },
-
-    /** @public */
-    activateMenu() {
-      if (!this.isInteractive || this.isMenuActive) return;
-      this.isMenuActive = true;
-    },
-
-    clearableCallback() {
-      this.setValue(this.multiple ? [] : null);
-      this.setMenuIndex(-1);
-      this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
-      if (this.openOnClear) this.isMenuActive = true;
-    },
-
-    closeConditional(e) {
-      if (!this.isMenuActive) return true;
-      return !this._isDestroyed && ( // Click originates from outside the menu content
-      // Multiple selects don't close when an item is clicked
-      !this.getContent() || !this.getContent().contains(e.target)) && // Click originates from outside the element
-      this.$el && !this.$el.contains(e.target) && e.target !== this.$el;
-    },
-
-    filterDuplicates(arr) {
-      const uniqueValues = new Map();
-
-      for (let index = 0; index < arr.length; ++index) {
-        const item = arr[index]; // Do not deduplicate headers or dividers (#12517)
 
-        if (item.header || item.divider) {
-          uniqueValues.set(item, item);
-          continue;
+  setup(props, _ref2) {
+    let {
+      slots
+    } = _ref2;
+    const {
+      t
+    } = useLocale();
+    const vTextFieldRef = ref();
+    const activator = ref();
+    const menu = ref(false);
+    const items = computed(() => props.items.map(genItem));
+    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v), v => props.multiple ? v : v[0]);
+    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++;
         }
-
-        const val = this.getValue(item); // TODO: comparator
-
-        !uniqueValues.has(val) && uniqueValues.set(val, item);
       }
 
-      return Array.from(uniqueValues.values());
-    },
-
-    findExistingIndex(item) {
-      const itemValue = this.getValue(item);
-      return (this.internalValue || []).findIndex(i => this.valueComparator(this.getValue(i), itemValue));
-    },
-
-    getContent() {
-      return this.$refs.menu && this.$refs.menu.$refs.content;
-    },
-
-    genChipSelection(item, index) {
-      const isDisabled = this.isDisabled || this.getDisabled(item);
-      const isInteractive = !isDisabled && this.isInteractive;
-      return this.$createElement(VChip, {
-        staticClass: 'v-chip--select',
-        attrs: {
-          tabindex: -1
-        },
-        props: {
-          close: this.deletableChips && isInteractive,
-          disabled: isDisabled,
-          inputValue: index === this.selectedIndex,
-          small: this.smallChips
-        },
-        on: {
-          click: e => {
-            if (!isInteractive) return;
-            e.stopPropagation();
-            this.selectedIndex = index;
-          },
-          'click:close': () => this.onChipInput(item)
-        },
-        key: JSON.stringify(this.getValue(item))
-      }, this.getText(item));
-    },
-
-    genCommaSelection(item, index, last) {
-      const color = index === this.selectedIndex && this.computedColor;
-      const isDisabled = this.isDisabled || this.getDisabled(item);
-      return this.$createElement('div', this.setTextColor(color, {
-        staticClass: 'v-select__selection v-select__selection--comma',
-        class: {
-          'v-select__selection--disabled': isDisabled
-        },
-        key: JSON.stringify(this.getValue(item))
-      }), `${this.getText(item)}${last ? '' : ', '}`);
-    },
+      return array;
+    });
+    const selected = computed(() => selections.value.map(selection => selection.value));
 
-    genDefaultSlot() {
-      const selections = this.genSelections();
-      const input = this.genInput(); // If the return is an empty array
-      // push the input
+    function onClear(e) {
+      model.value = [];
 
-      if (Array.isArray(selections)) {
-        selections.push(input); // Otherwise push it into children
-      } else {
-        selections.children = selections.children || [];
-        selections.children.push(input);
+      if (props.openOnClear) {
+        menu.value = true;
       }
+    }
 
-      return [this.genFieldset(), this.$createElement('div', {
-        staticClass: 'v-select__slot',
-        directives: this.directives
-      }, [this.genLabel(), this.prefix ? this.genAffix('prefix') : null, selections, this.suffix ? this.genAffix('suffix') : null, this.genClearIcon(), this.genIconSlot(), this.genHiddenInput()]), this.genMenu(), this.genProgress()];
-    },
-
-    genIcon(type, cb, extraData) {
-      const icon = VInput.options.methods.genIcon.call(this, type, cb, extraData);
+    function onClickControl() {
+      if (props.hideNoData && !items.value.length) return;
+      menu.value = true;
+    }
 
-      if (type === 'append') {
-        // Don't allow the dropdown icon to be focused
-        icon.children[0].data = mergeData(icon.children[0].data, {
-          attrs: {
-            tabindex: icon.children[0].componentOptions.listeners && '-1',
-            'aria-hidden': 'true',
-            'aria-label': undefined
-          }
-        });
+    function onKeydown(e) {
+      if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
+        menu.value = true;
       }
 
-      return icon;
-    },
-
-    genInput() {
-      const input = VTextField.options.methods.genInput.call(this);
-      delete input.data.attrs.name;
-      input.data = mergeData(input.data, {
-        domProps: {
-          value: null
-        },
-        attrs: {
-          readonly: true,
-          type: 'text',
-          'aria-readonly': String(this.isReadonly),
-          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-          autocomplete: getObjectValueByPath(input.data, 'attrs.autocomplete', 'off'),
-          placeholder: !this.isDirty && (this.isFocused || !this.hasLabel) ? this.placeholder : undefined
-        },
-        on: {
-          keypress: this.onKeyPress
-        }
-      });
-      return input;
-    },
-
-    genHiddenInput() {
-      return this.$createElement('input', {
-        domProps: {
-          value: this.lazyValue
-        },
-        attrs: {
-          type: 'hidden',
-          name: this.attrs$.name
-        }
-      });
-    },
-
-    genInputSlot() {
-      const render = VTextField.options.methods.genInputSlot.call(this);
-      render.data.attrs = { ...render.data.attrs,
-        role: 'button',
-        'aria-haspopup': 'listbox',
-        'aria-expanded': String(this.isMenuActive),
-        'aria-owns': this.computedOwns
-      };
-      return render;
-    },
-
-    genList() {
-      // If there's no slots, we can use a cached VNode to improve performance
-      if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
-        return this.genListWithSlot();
-      } else {
-        return this.staticList;
+      if (['Escape', 'Tab'].includes(e.key)) {
+        menu.value = false;
       }
-    },
-
-    genListWithSlot() {
-      const slots = ['prepend-item', 'no-data', 'append-item'].filter(slotName => this.$slots[slotName]).map(slotName => this.$createElement('template', {
-        slot: slotName
-      }, this.$slots[slotName])); // Requires destructuring due to Vue
-      // modifying the `on` property when passed
-      // as a referenced object
-
-      return this.$createElement(VSelectList, { ...this.listData
-      }, slots);
-    },
+    }
 
-    genMenu() {
-      const props = this.$_menuProps;
-      props.activator = this.$refs['input-slot']; // Attach to root el so that
-      // menu covers prepend/append icons
+    function select(item) {
+      if (props.multiple) {
+        const index = selections.value.findIndex(selection => selection.value === item.value);
 
-      if ( // TODO: make this a computed property or helper or something
-      this.attach === '' || // If used as a boolean prop (<v-menu attach>)
-      this.attach === true || // If bound to a boolean (<v-menu :attach="true">)
-      this.attach === 'attach' // If bound as boolean prop in pug (v-menu(attach))
-      ) {
-          props.attach = this.$el;
+        if (index === -1) {
+          model.value.push(item.value);
         } else {
-        props.attach = this.attach;
-      }
-
-      return this.$createElement(VMenu, {
-        attrs: {
-          role: undefined
-        },
-        props,
-        on: {
-          input: val => {
-            this.isMenuActive = val;
-            this.isFocused = val;
-          },
-          scroll: this.onScroll
-        },
-        ref: 'menu'
-      }, [this.genList()]);
-    },
-
-    genSelections() {
-      let length = this.selectedItems.length;
-      const children = new Array(length);
-      let genSelection;
-
-      if (this.$scopedSlots.selection) {
-        genSelection = this.genSlotSelection;
-      } else if (this.hasChips) {
-        genSelection = this.genChipSelection;
-      } else {
-        genSelection = this.genCommaSelection;
-      }
-
-      while (length--) {
-        children[length] = genSelection(this.selectedItems[length], length, length === children.length - 1);
-      }
-
-      return this.$createElement('div', {
-        staticClass: 'v-select__selections'
-      }, children);
-    },
-
-    genSlotSelection(item, index) {
-      return this.$scopedSlots.selection({
-        attrs: {
-          class: 'v-chip--select'
-        },
-        parent: this,
-        item,
-        index,
-        select: e => {
-          e.stopPropagation();
-          this.selectedIndex = index;
-        },
-        selected: index === this.selectedIndex,
-        disabled: !this.isInteractive
-      });
-    },
-
-    getMenuIndex() {
-      return this.$refs.menu ? this.$refs.menu.listIndex : -1;
-    },
-
-    getDisabled(item) {
-      return getPropertyFromItem(item, this.itemDisabled, false);
-    },
-
-    getText(item) {
-      return getPropertyFromItem(item, this.itemText, item);
-    },
-
-    getValue(item) {
-      return getPropertyFromItem(item, this.itemValue, this.getText(item));
-    },
-
-    onBlur(e) {
-      e && this.$emit('blur', e);
-    },
-
-    onChipInput(item) {
-      if (this.multiple) this.selectItem(item);else this.setValue(null); // If all items have been deleted,
-      // open `v-menu`
-
-      if (this.selectedItems.length === 0) {
-        this.isMenuActive = true;
-      } else {
-        this.isMenuActive = false;
-      }
-
-      this.selectedIndex = -1;
-    },
-
-    onClick(e) {
-      if (!this.isInteractive) return;
-
-      if (!this.isAppendInner(e.target)) {
-        this.isMenuActive = true;
-      }
-
-      if (!this.isFocused) {
-        this.isFocused = true;
-        this.$emit('focus');
-      }
-
-      this.$emit('click', e);
-    },
-
-    onEscDown(e) {
-      e.preventDefault();
-
-      if (this.isMenuActive) {
-        e.stopPropagation();
-        this.isMenuActive = false;
-      }
-    },
-
-    onKeyPress(e) {
-      if (this.multiple || !this.isInteractive || this.disableLookup) return;
-      const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
-
-      const now = performance.now();
-
-      if (now - this.keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
-        this.keyboardLookupPrefix = '';
-      }
-
-      this.keyboardLookupPrefix += e.key.toLowerCase();
-      this.keyboardLookupLastTime = now;
-      const index = this.allItems.findIndex(item => {
-        const text = (this.getText(item) || '').toString();
-        return text.toLowerCase().startsWith(this.keyboardLookupPrefix);
-      });
-      const item = this.allItems[index];
-
-      if (index !== -1) {
-        this.lastItem = Math.max(this.lastItem, index + 5);
-        this.setValue(this.returnObject ? item : this.getValue(item));
-        this.$nextTick(() => this.$refs.menu.getTiles());
-        setTimeout(() => this.setMenuIndex(index));
-      }
-    },
-
-    onKeyDown(e) {
-      if (this.isReadonly && e.keyCode !== keyCodes.tab) return;
-      const keyCode = e.keyCode;
-      const menu = this.$refs.menu; // If enter, space, open menu
-
-      if ([keyCodes.enter, keyCodes.space].includes(keyCode)) this.activateMenu();
-      this.$emit('keydown', e);
-      if (!menu) return; // If menu is active, allow default
-      // listIndex change from menu
-
-      if (this.isMenuActive && keyCode !== keyCodes.tab) {
-        this.$nextTick(() => {
-          menu.changeListIndex(e);
-          this.$emit('update:list-index', menu.listIndex);
-        });
-      } // If menu is not active, up/down/home/end can do
-      // one of 2 things. If multiple, opens the
-      // menu, if not, will cycle through all
-      // available options
-
-
-      if (!this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)) return this.onUpDown(e); // If escape deactivate the menu
-
-      if (keyCode === keyCodes.esc) return this.onEscDown(e); // If tab - select item or close menu
-
-      if (keyCode === keyCodes.tab) return this.onTabDown(e); // If space preventDefault
-
-      if (keyCode === keyCodes.space) return this.onSpaceDown(e);
-    },
-
-    onMenuActiveChange(val) {
-      // If menu is closing and mulitple
-      // or menuIndex is already set
-      // skip menu index recalculation
-      if (this.multiple && !val || this.getMenuIndex() > -1) return;
-      const menu = this.$refs.menu;
-      if (!menu || !this.isDirty) return; // When menu opens, set index of first active item
-
-      for (let i = 0; i < menu.tiles.length; i++) {
-        if (menu.tiles[i].getAttribute('aria-selected') === 'true') {
-          this.setMenuIndex(i);
-          break;
+          model.value = selected.value.filter(selection => selection !== item.value);
         }
-      }
-    },
-
-    onMouseUp(e) {
-      // eslint-disable-next-line sonarjs/no-collapsible-if
-      if (this.hasMouseDown && e.which !== 3 && this.isInteractive) {
-        // If append inner is present
-        // and the target is itself
-        // or inside, toggle menu
-        if (this.isAppendInner(e.target)) {
-          this.$nextTick(() => this.isMenuActive = !this.isMenuActive);
-        }
-      }
-
-      VTextField.options.methods.onMouseUp.call(this, e);
-    },
-
-    onScroll() {
-      if (!this.isMenuActive) {
-        requestAnimationFrame(() => this.getContent().scrollTop = 0);
       } else {
-        if (this.lastItem > this.computedItems.length) return;
-        const showMoreItems = this.getContent().scrollHeight - (this.getContent().scrollTop + this.getContent().clientHeight) < 200;
-
-        if (showMoreItems) {
-          this.lastItem += 20;
-        }
+        model.value = [item.value];
+        menu.value = false;
       }
-    },
-
-    onSpaceDown(e) {
-      e.preventDefault();
-    },
-
-    onTabDown(e) {
-      const menu = this.$refs.menu;
-      if (!menu) return;
-      const activeTile = menu.activeTile; // An item that is selected by
-      // menu-index should toggled
-
-      if (!this.multiple && activeTile && this.isMenuActive) {
-        e.preventDefault();
-        e.stopPropagation();
-        activeTile.click();
-      } else {
-        // If we make it here,
-        // the user has no selected indexes
-        // and is probably tabbing out
-        this.blur(e);
-      }
-    },
-
-    onUpDown(e) {
-      const menu = this.$refs.menu;
-      if (!menu) return;
-      e.preventDefault(); // Multiple selects do not cycle their value
-      // when pressing up or down, instead activate
-      // the menu
-
-      if (this.multiple) return this.activateMenu();
-      const keyCode = e.keyCode; // Cycle through available values to achieve
-      // select native behavior
-
-      menu.isBooted = true;
-      window.requestAnimationFrame(() => {
-        menu.getTiles();
-        if (!menu.hasClickableTiles) return this.activateMenu();
-
-        switch (keyCode) {
-          case keyCodes.up:
-            menu.prevTile();
-            break;
-
-          case keyCodes.down:
-            menu.nextTile();
-            break;
-
-          case keyCodes.home:
-            menu.firstTile();
-            break;
+    }
 
-          case keyCodes.end:
-            menu.lastTile();
-            break;
-        }
+    watch(() => vTextFieldRef.value, val => {
+      activator.value = val.$el.querySelector('.v-input__control');
+    });
+    useRender(() => {
+      const hasChips = !!(props.chips || slots.chip);
+      return _createVNode(VTextField, {
+        "ref": vTextFieldRef,
+        "class": ['v-select', {
+          'v-select--active-menu': menu.value,
+          'v-select--chips': !!props.chips,
+          [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true
+        }],
+        "appendInnerIcon": props.menuIcon,
+        "readonly": true,
+        "onClick:clear": onClear,
+        "onClick:input": onClickControl,
+        "onClick:control": onClickControl,
+        "onBlur": () => menu.value = false,
+        "modelValue": model.value.join(', '),
+        "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-select__content",
+          "eager": props.eager,
+          "openOnClick": false,
+          "transition": props.transition
+        }, {
+          default: () => [_createVNode(VList, {
+            "selected": selected.value,
+            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+          }, {
+            default: () => [!items.value.length && !props.hideNoData && _createVNode(VListItem, {
+              "title": t(props.noDataText)
+            }, null), items.value.map(item => _createVNode(VListItem, {
+              "title": item.title,
+              "value": item.value,
+              "onMousedown": e => e.preventDefault(),
+              "onClick": () => select(item)
+            }, null))]
+          })]
+        }), selections.value.map((selection, index) => {
+          function onChipClose(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            select(selection);
+          }
 
-        this.selectItem(this.allItems[this.getMenuIndex()]);
+          const slotProps = {
+            'onClick:close': onChipClose,
+            modelValue: true
+          };
+          return _createVNode("div", {
+            "class": "v-select__selection"
+          }, [hasChips && _createVNode(VDefaultsProvider, {
+            "defaults": {
+              VChip: {
+                closable: props.closableChips,
+                size: 'small',
+                text: selection.title
+              }
+            }
+          }, {
+            default: () => [slots.chip ? slots.chip({
+              props: slotProps,
+              selection
+            }) : _createVNode(VChip, slotProps, null)]
+          }), !hasChips && (slots.selection ? slots.selection({
+            selection
+          }) : _createVNode("span", {
+            "class": "v-select__selection-text"
+          }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+            "class": "v-select__selection-comma"
+          }, [_createTextVNode(",")])]))]);
+        })])
       });
-    },
-
-    selectItem(item) {
-      if (!this.multiple) {
-        this.setValue(this.returnObject ? item : this.getValue(item));
-        this.isMenuActive = false;
-      } else {
-        const internalValue = (this.internalValue || []).slice();
-        const i = this.findExistingIndex(item);
-        i !== -1 ? internalValue.splice(i, 1) : internalValue.push(item);
-        this.setValue(internalValue.map(i => {
-          return this.returnObject ? i : this.getValue(i);
-        })); // When selecting multiple
-        // adjust menu after each
-        // selection
-
-        this.$nextTick(() => {
-          this.$refs.menu && this.$refs.menu.updateDimensions();
-        }); // We only need to reset list index for multiple
-        // to keep highlight when an item is toggled
-        // on and off
-
-        if (!this.multiple) return;
-        const listIndex = this.getMenuIndex();
-        this.setMenuIndex(-1); // There is no item to re-highlight
-        // when selections are hidden
-
-        if (this.hideSelected) return;
-        this.$nextTick(() => this.setMenuIndex(listIndex));
-      }
-    },
-
-    setMenuIndex(index) {
-      this.$refs.menu && (this.$refs.menu.listIndex = index);
-    },
-
-    setSelectedItems() {
-      const selectedItems = [];
-      const values = !this.multiple || !Array.isArray(this.internalValue) ? [this.internalValue] : this.internalValue;
-
-      for (const value of values) {
-        const index = this.allItems.findIndex(v => this.valueComparator(this.getValue(v), this.getValue(value)));
-
-        if (index > -1) {
-          selectedItems.push(this.allItems[index]);
-        }
-      }
-
-      this.selectedItems = selectedItems;
-    },
-
-    setValue(value) {
-      if (!this.valueComparator(value, this.internalValue)) {
-        this.internalValue = value;
-        this.$emit('change', value);
-      }
-    },
-
-    isAppendInner(target) {
-      // return true if append inner is present
-      // and the target is itself or inside
-      const appendInner = this.$refs['append-inner'];
-      return appendInner && (appendInner === target || appendInner.contains(target));
-    }
-
+    });
+    return useForwardRef({}, vTextFieldRef);
   }
+
 });
 //# sourceMappingURL=VSelect.mjs.map