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

package/lib/components/VCombobox/VCombobox.mjs

@@ -1,242 +1,357 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "../VAutocomplete/VAutocomplete.sass"; // Extensions
-
-import VSelect from "../VSelect/VSelect.mjs";
-import VAutocomplete from "../VAutocomplete/VAutocomplete.mjs"; // Utils
-
-import { keyCodes } from "../../util/helpers.mjs"; // Types
-
-/* @vue/component */
-export default VAutocomplete.extend({
-  name: 'v-combobox',
+import "./VCombobox.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";
+import { useTextColor } from "../../composables/color.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-combobox__unmask"
+  }, [text.substr(0, matches)]), _createVNode("span", {
+    "class": "v-combobox__mask"
+  }, [text.substr(matches, length)]), _createVNode("span", {
+    "class": "v-combobox__unmask"
+  }, [text.substr(matches + length)])]) : text;
+}
+
+export const VCombobox = genericComponent()({
+  name: 'VCombobox',
   props: {
-    delimiters: {
-      type: Array,
-      default: () => []
-    },
-    returnObject: {
-      type: Boolean,
-      default: true
-    }
+    // TODO: implement post keyboard support
+    // autoSelectFirst: Boolean,
+    delimiters: Array,
+    ...makeFilterProps({
+      filterKeys: ['title']
+    }),
+    ...makeSelectProps({
+      hideNoData: true
+    }),
+    ...makeTransitionProps({
+      transition: false
+    })
   },
-  data: () => ({
-    editingIndex: -1
-  }),
-  computed: {
-    computedCounterValue() {
-      return this.multiple ? this.selectedItems.length : (this.internalSearch || '').toString().length;
-    },
-
-    hasSlot() {
-      return VSelect.options.computed.hasSlot.call(this) || this.multiple;
-    },
-
-    isAnyValueAllowed() {
-      return true;
-    },
-
-    menuCanShow() {
-      if (!this.isFocused) return false;
-      return this.hasDisplayedItems || !!this.$slots['no-data'] && !this.hideNoData;
-    },
-
-    searchIsDirty() {
-      return this.internalSearch != null;
-    }
-
+  emits: {
+    'update:modelValue': val => true
   },
-  methods: {
-    onInternalSearchChanged(val) {
-      if (val && this.multiple && this.delimiters.length) {
-        const delimiter = this.delimiters.find(d => val.endsWith(d));
-
-        if (delimiter != null) {
-          this.internalSearch = val.slice(0, val.length - delimiter.length);
-          this.updateTags();
+
+  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 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 {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(color);
+    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
+
+    const _search = ref('');
+
+    const search = computed({
+      get: () => props.multiple ? _search.value : genItem(model.value[0]).value,
+      set: val => {
+        var _props$delimiters;
+
+        if (props.multiple) {
+          _search.value = val;
+        } else {
+          model.value = [val];
         }
-      }
 
-      this.updateMenuDimensions();
-    },
-
-    genInput() {
-      const input = VAutocomplete.options.methods.genInput.call(this);
-      delete input.data.attrs.name;
-      input.data.on.paste = this.onPaste;
-      return input;
-    },
-
-    genChipSelection(item, index) {
-      const chip = VSelect.options.methods.genChipSelection.call(this, item, index); // Allow user to update an existing value
-
-      if (this.multiple) {
-        chip.componentOptions.listeners = { ...chip.componentOptions.listeners,
-          dblclick: () => {
-            this.editingIndex = index;
-            this.internalSearch = this.getText(item);
-            this.selectedIndex = -1;
+        if (val && props.multiple && (_props$delimiters = props.delimiters) != null && _props$delimiters.length) {
+          const values = val.split(new RegExp(`(?:${props.delimiters.join('|')})+`));
+
+          if (values.length > 1) {
+            values.forEach(v => {
+              v = v.trim();
+              if (v) select({
+                value: v
+              });
+            });
+            _search.value = '';
           }
-        };
-      }
+        }
 
-      return chip;
-    },
-
-    onChipInput(item) {
-      VSelect.options.methods.onChipInput.call(this, item);
-      this.editingIndex = -1;
-    },
-
-    // Requires a manual definition
-    // to overwrite removal in v-autocomplete
-    onEnterDown(e) {
-      e.preventDefault(); // If has menu index, let v-select-list handle
-
-      if (this.getMenuIndex() > -1) return;
-      this.$nextTick(this.updateSelf);
-    },
-
-    onFilteredItemsChanged(val, oldVal) {
-      if (!this.autoSelectFirst) return;
-      VAutocomplete.options.methods.onFilteredItemsChanged.call(this, val, oldVal);
-    },
-
-    onKeyDown(e) {
-      const keyCode = e.keyCode;
-
-      if (e.ctrlKey || ![keyCodes.home, keyCodes.end].includes(keyCode)) {
-        VSelect.options.methods.onKeyDown.call(this, e);
-      } // If user is at selection index of 0
-      // create a new tag
-
-
-      if (this.multiple && keyCode === keyCodes.left && this.$refs.input.selectionStart === 0) {
-        this.updateSelf();
-      } else if (keyCode === keyCodes.enter) {
-        this.onEnterDown(e);
-      } // The ordering is important here
-      // allows new value to be updated
-      // and then moves the index to the
-      // proper location
-
-
-      this.changeSelectedIndex(keyCode);
-    },
-
-    onTabDown(e) {
-      // When adding tags, if searching and
-      // there is not a filtered options,
-      // add the value to the tags list
-      if (this.multiple && this.internalSearch && this.getMenuIndex() === -1) {
-        e.preventDefault();
-        e.stopPropagation();
-        return this.updateTags();
+        if (!val) selectionIndex.value = -1;
+        if (isFocused.value) menu.value = true;
+        isPristine.value = !val;
+      }
+    });
+    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++;
+        }
       }
 
-      VAutocomplete.options.methods.onTabDown.call(this, e);
-    },
+      return array;
+    });
+    const selected = computed(() => selections.value.map(selection => selection.value));
+    const selection = computed(() => selections.value[selectionIndex.value]);
 
-    selectItem(item) {
-      // Currently only supports items:<string[]>
-      if (this.editingIndex > -1) {
-        this.updateEditing();
-      } else {
-        VAutocomplete.options.methods.selectItem.call(this, item); // if selected item contains search value,
-        // remove the search string
+    function onClear(e) {
+      model.value = [];
 
-        if (this.internalSearch && this.multiple && this.getText(item).toLocaleLowerCase().includes(this.internalSearch.toLocaleLowerCase())) {
-          this.internalSearch = null;
-        }
+      if (props.openOnClear) {
+        menu.value = true;
       }
-    },
+    }
 
-    setSelectedItems() {
-      if (this.internalValue == null || this.internalValue === '') {
-        this.selectedItems = [];
-      } else {
-        this.selectedItems = this.multiple ? this.internalValue : [this.internalValue];
-      }
-    },
+    function onClickControl() {
+      if (props.hideNoData && !filteredItems.value.length) return;
+      menu.value = true;
+    }
+
+    function onKeydown(e) {
+      const selectionStart = vTextFieldRef.value.selectionStart;
+      const length = selected.value.length;
+      if (selectionIndex.value > -1) e.preventDefault();
 
-    setValue(value) {
-      VSelect.options.methods.setValue.call(this, value != null ? value : this.internalSearch);
-    },
+      if (['Enter', 'ArrowDown'].includes(e.key)) {
+        menu.value = true;
+      }
 
-    updateEditing() {
-      const value = this.internalValue.slice();
-      value[this.editingIndex] = this.internalSearch;
-      this.setValue(value);
-      this.editingIndex = -1;
-    },
+      if (['Escape'].includes(e.key)) {
+        menu.value = false;
+      }
 
-    updateCombobox() {
-      // If search is not dirty, do nothing
-      if (!this.searchIsDirty) return; // The internal search is not matching
-      // the internal value, update the input
+      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
+        isPristine.value = true;
+      }
 
-      if (this.internalSearch !== this.getText(this.internalValue)) this.setValue(); // Reset search if using slot to avoid a double input
+      if (!props.multiple) return;
 
-      const isUsingSlot = Boolean(this.$scopedSlots.selection) || this.hasChips;
-      if (isUsingSlot) this.internalSearch = null;
-    },
+      if (['Backspace', 'Delete'].includes(e.key)) {
+        if (selectionIndex.value < 0) {
+          if (e.key === 'Backspace' && !search.value) {
+            selectionIndex.value = length - 1;
+          }
 
-    updateSelf() {
-      this.multiple ? this.updateTags() : this.updateCombobox();
-    },
+          return;
+        }
 
-    updateTags() {
-      const menuIndex = this.getMenuIndex(); // If the user is not searching
-      // and no menu item is selected
-      // or if the search is empty
-      // do nothing
+        select(selection.value);
+        nextTick(() => !selection.value && (selectionIndex.value = length - 2));
+      }
 
-      if (menuIndex < 0 && !this.searchIsDirty || !this.internalSearch) return;
+      if (e.key === 'ArrowLeft') {
+        if (selectionIndex.value < 0 && selectionStart > 0) return;
+        const prev = selectionIndex.value > -1 ? selectionIndex.value - 1 : length - 1;
 
-      if (this.editingIndex > -1) {
-        return this.updateEditing();
+        if (selections.value[prev]) {
+          selectionIndex.value = prev;
+        } else {
+          selectionIndex.value = -1;
+          vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length);
+        }
       }
 
-      const index = this.selectedItems.findIndex(item => this.internalSearch === this.getText(item)); // If the duplicate item is an object,
-      // copy it, so that it can be added again later
+      if (e.key === 'ArrowRight') {
+        if (selectionIndex.value < 0) return;
+        const next = selectionIndex.value + 1;
 
-      const itemToSelect = index > -1 && typeof this.selectedItems[index] === 'object' ? Object.assign({}, this.selectedItems[index]) : this.internalSearch; // If it already exists, do nothing
-      // this might need to change to bring
-      // the duplicated item to the last entered
+        if (selections.value[next]) {
+          selectionIndex.value = next;
+        } else {
+          selectionIndex.value = -1;
+          vTextFieldRef.value.setSelectionRange(0, 0);
+        }
+      }
 
-      if (index > -1) {
-        const internalValue = this.internalValue.slice();
-        internalValue.splice(index, 1);
-        this.setValue(internalValue);
-      } // If menu index is greater than 1
-      // the selection is handled elsewhere
-      // TODO: find out where
+      if (e.key === 'Enter') {
+        select({
+          value: search.value
+        });
+        search.value = '';
+      }
+    }
 
+    function onAfterLeave() {
+      if (isFocused.value) isPristine.value = true;
+    }
 
-      if (menuIndex > -1) return this.internalSearch = null;
-      this.selectItem(itemToSelect);
-      this.internalSearch = null;
-    },
+    function select(item) {
+      if (props.multiple) {
+        const index = selections.value.findIndex(selection => selection.value === item.value);
 
-    onPaste(event) {
-      var _event$clipboardData;
+        if (index === -1) {
+          model.value.push(item.value);
+        } else {
+          model.value = selected.value.filter(selection => selection !== item.value);
+        }
 
-      if (!this.multiple || this.searchIsDirty) return;
-      const pastedItemText = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData('text/vnd.vuetify.autocomplete.item+plain');
+        search.value = '';
+      } else {
+        search.value = item.title; // watch for search watcher to trigger
 
-      if (pastedItemText && this.findExistingIndex(pastedItemText) === -1) {
-        event.preventDefault();
-        VSelect.options.methods.selectItem.call(this, pastedItemText);
+        nextTick(() => {
+          menu.value = false;
+          isPristine.value = true;
+        });
       }
-    },
-
-    clearableCallback() {
-      this.editingIndex = -1;
-      VAutocomplete.options.methods.clearableCallback.call(this);
     }
 
+    watch(() => vTextFieldRef.value, val => {
+      activator.value = val.$el.querySelector('.v-input__control');
+    });
+    watch(filteredItems, val => {
+      if (!val.length && props.hideNoData) menu.value = false;
+    });
+    watch(isFocused, val => {
+      if (val) {
+        selectionIndex.value = -1;
+      } else {
+        menu.value = false;
+        if (!props.multiple || !search.value) return;
+        model.value.push(search.value);
+        search.value = '';
+      }
+    });
+    useRender(() => {
+      const hasChips = !!(props.chips || slots.chip);
+      return _createVNode(VTextField, {
+        "ref": vTextFieldRef,
+        "modelValue": search.value,
+        "onUpdate:modelValue": $event => search.value = $event,
+        "class": ['v-combobox', {
+          'v-combobox--active-menu': menu.value,
+          'v-combobox--chips': !!props.chips,
+          'v-combobox--selecting-index': selectionIndex.value > -1,
+          [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
+        }],
+        "appendInnerIcon": props.items.length ? props.menuIcon : undefined,
+        "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-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);
+                }
+              });
+            })]
+          })]
+        }), 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-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
+              }
+            }
+          }, {
+            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(",")])]))]);
+        })])
+      });
+    });
+    return useForwardRef({
+      isFocused,
+      isPristine,
+      menu,
+      search,
+      selectionIndex,
+      filteredItems,
+      select
+    }, vTextFieldRef);
   }
+
 });
 //# sourceMappingURL=VCombobox.mjs.map