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

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -1,391 +1,261 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VAutocomplete.sass"; // Extensions
-
-import VSelect, { defaultMenuProps as VSelectMenuProps } from "../VSelect/VSelect.mjs";
-import VTextField from "../VTextField/VTextField.mjs"; // Utilities
-
-import mergeData from "../../util/mergeData.mjs";
-import { getObjectValueByPath, getPropertyFromItem, keyCodes } from "../../util/helpers.mjs"; // Types
-
-const defaultMenuProps = { ...VSelectMenuProps,
-  offsetY: true,
-  offsetOverflow: true,
-  transition: false
-};
-/* @vue/component */
-
-export default VSelect.extend({
-  name: 'v-autocomplete',
+import "./VAutocomplete.css"; // Components
+
+import { genItem, makeSelectProps } from "../VSelect/VSelect.mjs";
+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 { makeFilterProps, useFilter } from "../../composables/filter.mjs";
+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, nextTick, ref, watch } from 'vue';
+import { genericComponent, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+
+function highlightResult(text, matches, length) {
+  if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented');
+  return typeof matches === 'number' && ~matches ? _createVNode(_Fragment, null, [_createVNode("span", {
+    "class": "v-autocomplete__unmask"
+  }, [text.substr(0, matches)]), _createVNode("span", {
+    "class": "v-autocomplete__mask"
+  }, [text.substr(matches, length)]), _createVNode("span", {
+    "class": "v-autocomplete__unmask"
+  }, [text.substr(matches + length)])]) : text;
+}
+
+export const VAutocomplete = genericComponent()({
+  name: 'VAutocomplete',
   props: {
-    allowOverflow: {
-      type: Boolean,
-      default: true
-    },
-    autoSelectFirst: {
-      type: Boolean,
-      default: false
-    },
-    filter: {
-      type: Function,
-      default: (item, queryText, itemText) => {
-        return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1;
-      }
-    },
-    hideNoData: Boolean,
-    menuProps: {
-      type: VSelect.options.props.menuProps.type,
-      default: () => defaultMenuProps
-    },
-    noFilter: Boolean,
-    searchInput: {
-      type: String
-    }
+    // TODO: implement post keyboard support
+    // autoSelectFirst: Boolean,
+    search: String,
+    ...makeFilterProps({
+      filterKeys: ['title']
+    }),
+    ...makeSelectProps(),
+    ...makeTransitionProps({
+      transition: false
+    })
   },
-
-  data() {
-    return {
-      lazySearch: this.searchInput
-    };
+  emits: {
+    'click:clear': e => true,
+    'update:search': val => true,
+    'update:modelValue': val => true
   },
 
-  computed: {
-    classes() {
-      return { ...VSelect.options.computed.classes.call(this),
-        'v-autocomplete': true,
-        'v-autocomplete--is-selecting-index': this.selectedIndex > -1
-      };
-    },
-
-    computedItems() {
-      return this.filteredItems;
-    },
-
-    selectedValues() {
-      return this.selectedItems.map(item => this.getValue(item));
-    },
-
-    hasDisplayedItems() {
-      return this.hideSelected ? this.filteredItems.some(item => !this.hasItem(item)) : this.filteredItems.length > 0;
-    },
-
-    currentRange() {
-      if (this.selectedItem == null) return 0;
-      return String(this.getText(this.selectedItem)).length;
-    },
-
-    filteredItems() {
-      if (!this.isSearching || this.noFilter || this.internalSearch == null) return this.allItems;
-      return this.allItems.filter(item => {
-        const value = getPropertyFromItem(item, this.itemText);
-        const text = value != null ? String(value) : '';
-        return this.filter(item, String(this.internalSearch), text);
-      });
-    },
-
-    internalSearch: {
-      get() {
-        return this.lazySearch;
-      },
-
-      set(val) {
-        // TODO: this should be `string | null` but it breaks lots of other types
-        // emit update event only when the new
-        // search value is different from previous
-        if (this.lazySearch !== val) {
-          this.lazySearch = val;
-          this.$emit('update:search-input', val);
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      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 search = useProxiedModel(props, 'search', '');
+    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
+    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++;
         }
       }
 
-    },
-
-    isAnyValueAllowed() {
-      return false;
-    },
-
-    isDirty() {
-      return this.searchIsDirty || this.selectedItems.length > 0;
-    },
-
-    isSearching() {
-      return this.multiple && this.searchIsDirty || this.searchIsDirty && this.internalSearch !== this.getText(this.selectedItem);
-    },
-
-    menuCanShow() {
-      if (!this.isFocused) return false;
-      return this.hasDisplayedItems || !this.hideNoData;
-    },
-
-    $_menuProps() {
-      const props = VSelect.options.computed.$_menuProps.call(this);
-      props.contentClass = `v-autocomplete__content ${props.contentClass || ''}`.trim();
-      return { ...defaultMenuProps,
-        ...props
-      };
-    },
+      return array;
+    });
+    const selected = computed(() => selections.value.map(selection => selection.value));
 
-    searchIsDirty() {
-      return this.internalSearch != null && this.internalSearch !== '';
-    },
+    function onClear(e) {
+      model.value = [];
 
-    selectedItem() {
-      if (this.multiple) return null;
-      return this.selectedItems.find(i => {
-        return this.valueComparator(this.getValue(i), this.getValue(this.internalValue));
-      });
-    },
+      if (props.openOnClear) {
+        menu.value = true;
+      }
 
-    listData() {
-      const data = VSelect.options.computed.listData.call(this);
-      data.props = { ...data.props,
-        items: this.virtualizedItems,
-        noFilter: this.noFilter || !this.isSearching || !this.filteredItems.length,
-        searchInput: this.internalSearch
-      };
-      return data;
+      search.value = '';
     }
 
-  },
-  watch: {
-    filteredItems: 'onFilteredItemsChanged',
-    internalValue: 'setSearch',
+    function onClickControl() {
+      if (props.hideNoData && !filteredItems.value.length) return;
+      menu.value = true;
+    }
 
-    isFocused(val) {
-      if (val) {
-        document.addEventListener('copy', this.onCopy);
-        this.$refs.input && this.$refs.input.select();
-      } else {
-        document.removeEventListener('copy', this.onCopy);
-        this.$refs.input && this.$refs.input.blur();
-        this.updateSelf();
+    function onKeydown(e) {
+      if (['Enter', 'ArrowDown'].includes(e.key)) {
+        menu.value = true;
       }
-    },
-
-    isMenuActive(val) {
-      if (val || !this.hasSlot) return;
-      this.lazySearch = null;
-    },
-
-    items(val, oldVal) {
-      // If we are focused, the menu
-      // is not active, hide no data is enabled,
-      // and items change
-      // User is probably async loading
-      // items, try to activate the menu
-      if (!(oldVal && oldVal.length) && this.hideNoData && this.isFocused && !this.isMenuActive && val.length) this.activateMenu();
-    },
-
-    searchInput(val) {
-      this.lazySearch = val;
-    },
-
-    internalSearch: 'onInternalSearchChanged',
-    itemText: 'updateSelf'
-  },
-
-  created() {
-    this.setSearch();
-  },
 
-  destroyed() {
-    document.removeEventListener('copy', this.onCopy);
-  },
+      if (['Escape'].includes(e.key)) {
+        menu.value = false;
+      }
 
-  methods: {
-    onFilteredItemsChanged(val, oldVal) {
-      // TODO: How is the watcher triggered
-      // for duplicate items? no idea
-      if (val === oldVal) return;
-      this.setMenuIndex(-1);
-      this.$nextTick(() => {
-        if (!this.internalSearch || val.length !== 1 && !this.autoSelectFirst) return;
-        this.$refs.menu.getTiles();
-        this.setMenuIndex(0);
-      });
-    },
+      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+        isPristine.value = true;
+      }
+    }
 
-    onInternalSearchChanged() {
-      this.updateMenuDimensions();
-    },
+    function onAfterLeave() {
+      if (isFocused.value) isPristine.value = true;
+    }
 
-    updateMenuDimensions() {
-      // Type from menuable is not making it through
-      this.isMenuActive && this.$refs.menu && this.$refs.menu.updateDimensions();
-    },
+    const isSelecting = ref(false);
 
-    changeSelectedIndex(keyCode) {
-      // Do not allow changing of selectedIndex
-      // when search is dirty
-      if (this.searchIsDirty) return;
+    function select(item) {
+      if (props.multiple) {
+        const index = selections.value.findIndex(selection => selection.value === item.value);
 
-      if (this.multiple && keyCode === keyCodes.left) {
-        if (this.selectedIndex === -1) {
-          this.selectedIndex = this.selectedItems.length - 1;
+        if (index === -1) {
+          model.value.push(item.value);
         } else {
-          this.selectedIndex--;
+          model.value = selected.value.filter(selection => selection !== item.value);
         }
-      } else if (this.multiple && keyCode === keyCodes.right) {
-        if (this.selectedIndex >= this.selectedItems.length - 1) {
-          this.selectedIndex = -1;
-        } else {
-          this.selectedIndex++;
-        }
-      } else if (keyCode === keyCodes.backspace || keyCode === keyCodes.delete) {
-        this.deleteCurrentItem();
-      }
-    },
-
-    deleteCurrentItem() {
-      const curIndex = this.selectedIndex;
-      const curItem = this.selectedItems[curIndex]; // Do nothing if input or item is disabled
-
-      if (!this.isInteractive || this.getDisabled(curItem)) return;
-      const lastIndex = this.selectedItems.length - 1; // Select the last item if
-      // there is no selection
-
-      if (this.selectedIndex === -1 && lastIndex !== 0) {
-        this.selectedIndex = lastIndex;
-        return;
+      } else {
+        model.value = [item.value];
+        isSelecting.value = true;
+        search.value = item.title;
+        menu.value = false;
+        isPristine.value = true;
+        nextTick(() => isSelecting.value = false);
       }
+    }
 
-      const length = this.selectedItems.length;
-      const nextIndex = curIndex !== length - 1 ? curIndex : curIndex - 1;
-      const nextItem = this.selectedItems[nextIndex];
+    watch(() => vTextFieldRef.value, val => {
+      activator.value = val.$el.querySelector('.v-input__control');
+    });
+    watch(isFocused, val => {
+      if (val) {
+        var _model$value;
 
-      if (!nextItem) {
-        this.setValue(this.multiple ? [] : null);
+        isSelecting.value = true;
+        search.value = props.multiple ? '' : String((_model$value = model.value) != null ? _model$value : '');
+        isPristine.value = true;
+        nextTick(() => isSelecting.value = false);
       } else {
-        this.selectItem(curItem);
+        menu.value = false;
+        search.value = '';
       }
-
-      this.selectedIndex = nextIndex;
-    },
-
-    clearableCallback() {
-      this.internalSearch = null;
-      VSelect.options.methods.clearableCallback.call(this);
-    },
-
-    genInput() {
-      const input = VTextField.options.methods.genInput.call(this);
-      input.data = mergeData(input.data, {
-        attrs: {
-          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-          autocomplete: getObjectValueByPath(input.data, 'attrs.autocomplete', 'off')
-        },
-        domProps: {
-          value: this.internalSearch
-        }
-      });
-      return input;
-    },
-
-    genInputSlot() {
-      const slot = VSelect.options.methods.genInputSlot.call(this);
-      slot.data.attrs.role = 'combobox';
-      return slot;
-    },
-
-    genSelections() {
-      return this.hasSlot || this.multiple ? VSelect.options.methods.genSelections.call(this) : [];
-    },
-
-    onClick(e) {
-      if (!this.isInteractive) return;
-      this.selectedIndex > -1 ? this.selectedIndex = -1 : this.onFocus();
-      if (!this.isAppendInner(e.target)) this.activateMenu();
-    },
-
-    onInput(e) {
-      if (this.selectedIndex > -1 || !e.target) return;
-      const target = e.target;
-      const value = target.value; // If typing and menu is not currently active
-
-      if (target.value) this.activateMenu();
-      this.internalSearch = value;
-      this.badInput = target.validity && target.validity.badInput;
-    },
-
-    onKeyDown(e) {
-      const keyCode = e.keyCode;
-
-      if (e.ctrlKey || ![keyCodes.home, keyCodes.end].includes(keyCode)) {
-        VSelect.options.methods.onKeyDown.call(this, e);
-      } // The ordering is important here
-      // allows new value to be updated
-      // and then moves the index to the
-      // proper location
-
-
-      this.changeSelectedIndex(keyCode);
-    },
-
-    onSpaceDown(e) {
-      /* noop */
-    },
-
-    onTabDown(e) {
-      VSelect.options.methods.onTabDown.call(this, e);
-      this.updateSelf();
-    },
-
-    onUpDown(e) {
-      // Prevent screen from scrolling
-      e.preventDefault(); // For autocomplete / combobox, cycling
-      // interfers with native up/down behavior
-      // instead activate the menu
-
-      this.activateMenu();
-    },
-
-    selectItem(item) {
-      VSelect.options.methods.selectItem.call(this, item);
-      this.setSearch();
-    },
-
-    setSelectedItems() {
-      VSelect.options.methods.setSelectedItems.call(this); // #4273 Don't replace if searching
-      // #4403 Don't replace if focused
-
-      if (!this.isFocused) this.setSearch();
-    },
-
-    setSearch() {
-      // Wait for nextTick so selectedItem
-      // has had time to update
-      this.$nextTick(() => {
-        if (!this.multiple || !this.internalSearch || !this.isMenuActive) {
-          this.internalSearch = !this.selectedItems.length || this.multiple || this.hasSlot ? null : this.getText(this.selectedItem);
-        }
+    });
+    watch(search, val => {
+      if (!isFocused.value || isSelecting.value) return;
+      if (val) menu.value = true;
+      isPristine.value = !val;
+    });
+    useRender(() => {
+      const hasChips = !!(props.chips || slots.chip);
+      return _createVNode(VTextField, {
+        "ref": vTextFieldRef,
+        "modelValue": search.value,
+        "onUpdate:modelValue": $event => search.value = $event,
+        "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,
+        "onClick:clear": onClear,
+        "onClick:control": onClickControl,
+        "onClick:input": onClickControl,
+        "onFocus": () => isFocused.value = true,
+        "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;
+
+                  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);
+                }
+              });
+            })]
+          })]
+        }), selections.value.map((selection, index) => {
+          function onChipClose(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            select(selection);
+          }
+
+          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
+              }
+            }
+          }, {
+            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(",")])]))]);
+        })])
       });
-    },
-
-    updateSelf() {
-      if (!this.searchIsDirty && !this.internalValue) return;
-
-      if (!this.valueComparator(this.internalSearch, this.getValue(this.internalValue))) {
-        this.setSearch();
-      }
-    },
-
-    hasItem(item) {
-      return this.selectedValues.indexOf(this.getValue(item)) > -1;
-    },
-
-    onCopy(event) {
-      var _event$clipboardData, _event$clipboardData2;
-
-      if (this.selectedIndex === -1) return;
-      const currentItem = this.selectedItems[this.selectedIndex];
-      const currentItemText = this.getText(currentItem);
-      (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.setData('text/plain', currentItemText);
-      (_event$clipboardData2 = event.clipboardData) == null ? void 0 : _event$clipboardData2.setData('text/vnd.vuetify.autocomplete.item+plain', currentItemText);
-      event.preventDefault();
-    }
-
+    });
+    return useForwardRef({
+      filteredItems
+    }, vTextFieldRef);
   }
+
 });
 //# sourceMappingURL=VAutocomplete.mjs.map