vuetify 3.5.6 → 3.5.7

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.6
+* Vuetify v3.5.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -6881,7 +6881,8 @@ const VCheckbox = genericComponent()({
             id,
             messagesId,
             isDisabled,
-            isReadonly
+            isReadonly,
+            isValid
           } = _ref2;
           return createVNode(VCheckboxBtn, mergeProps(checkboxProps, {
             "id": id.value,
@@ -6889,6 +6890,7 @@ const VCheckbox = genericComponent()({
             "disabled": isDisabled.value,
             "readonly": isReadonly.value
           }, controlAttrs, {
+            "error": isValid.value === false,
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "onFocus": focus,
@@ -11838,21 +11840,27 @@ const VSelect = genericComponent()({
         model.value = [item];
       }
     }
+
+    /** @param set - null means toggle */
     function select(item) {
-      let add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (item.props.disabled) return;
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        add = index === -1;
-        if (add) {
-          model.value = [...model.value, item];
-        } else {
-          const value = [...model.value];
+        const add = set == null ? !~index : set;
+        if (~index) {
+          const value = add ? [...model.value, item] : [...model.value];
           value.splice(index, 1);
           model.value = value;
+        } else if (add) {
+          model.value = [...model.value, item];
         }
       } else {
+        const add = set !== false;
         model.value = add ? [item] : [];
-        menu.value = false;
+        nextTick(() => {
+          menu.value = false;
+        });
       }
     }
     function onBlur(e) {
@@ -11886,14 +11894,9 @@ const VSelect = genericComponent()({
         });
       }
     });
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return;
-      if (!val.length && props.hideNoData) {
-        menu.value = false;
-      }
-      if (!oldVal.length && val.length) {
-        menu.value = true;
-      }
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return;
+      menu.value = true;
     });
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
@@ -11971,7 +11974,7 @@ const VSelect = genericComponent()({
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
                   key: index,
-                  onClick: () => select(item)
+                  onClick: () => select(item, null)
                 });
                 return slots.item?.({
                   item,
@@ -12278,6 +12281,8 @@ const VAutocomplete = genericComponent()({
       }
       return filteredItems.value;
     });
+    const hasChips = computed(() => !!(props.chips || slots.chip));
+    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
     const selectedValues = computed(() => model.value.map(selection => selection.props.value));
     const highlightFirst = computed(() => {
       const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
@@ -12336,7 +12341,7 @@ const VAutocomplete = genericComponent()({
         }
         const originalSelectionIndex = selectionIndex.value;
         const selectedItem = model.value[selectionIndex.value];
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem);
+        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false);
         selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (e.key === 'ArrowLeft') {
@@ -12387,36 +12392,41 @@ const VAutocomplete = genericComponent()({
       if (v == null || v === '' && !props.multiple) model.value = [];
     }
     const isSelecting = shallowRef(false);
+
+    /** @param set - null means toggle */
     function select(item) {
-      let add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       if (item.props.disabled) return;
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        add = index === -1;
-        if (add) {
-          model.value = [...model.value, item];
-        } else {
-          const value = [...model.value];
+        const add = set == null ? !~index : set;
+        if (~index) {
+          const value = add ? [...model.value, item] : [...model.value];
           value.splice(index, 1);
           model.value = value;
+        } else if (add) {
+          model.value = [...model.value, item];
         }
         if (props.clearOnSelect) {
           search.value = '';
         }
       } else {
+        const add = set !== false;
         model.value = add ? [item] : [];
-        isSelecting.value = true;
-        search.value = add ? item.title : '';
-        menu.value = false;
-        isPristine.value = true;
-        nextTick(() => isSelecting.value = false);
+        search.value = add && !hasSelectionSlot.value ? item.title : '';
+
+        // watch for search watcher to trigger
+        nextTick(() => {
+          menu.value = false;
+          isPristine.value = true;
+        });
       }
     }
     watch(isFocused, (val, oldVal) => {
       if (val === oldVal) return;
       if (val) {
         isSelecting.value = true;
-        search.value = props.multiple ? '' : String(model.value.at(-1)?.props.title ?? '');
+        search.value = props.multiple || hasSelectionSlot.value ? '' : String(model.value.at(-1)?.props.title ?? '');
         isPristine.value = true;
         nextTick(() => isSelecting.value = false);
       } else {
@@ -12446,17 +12456,11 @@ const VAutocomplete = genericComponent()({
         });
       }
     });
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return;
-      if (!val.length && props.hideNoData) {
-        menu.value = false;
-      }
-      if (!oldVal.length && val.length) {
-        menu.value = true;
-      }
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return;
+      menu.value = true;
     });
     useRender(() => {
-      const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
       const isDirty = model.value.length > 0;
       const textFieldProps = VTextField.filterProps(props);
@@ -12474,7 +12478,7 @@ const VAutocomplete = genericComponent()({
         "class": ['v-autocomplete', `v-autocomplete--${props.multiple ? 'multiple' : 'single'}`, {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
-          'v-autocomplete--selection-slot': !!slots.selection,
+          'v-autocomplete--selection-slot': !!hasSelectionSlot.value,
           'v-autocomplete--selecting-index': selectionIndex.value > -1
         }, props.class],
         "style": props.style,
@@ -12529,7 +12533,7 @@ const VAutocomplete = genericComponent()({
                   ref: itemRef,
                   key: index,
                   active: highlightFirst.value && index === 0 ? true : undefined,
-                  onClick: () => select(item)
+                  onClick: () => select(item, null)
                 });
                 return slots.item?.({
                   item,
@@ -12575,8 +12579,8 @@ const VAutocomplete = genericComponent()({
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
-          const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
-          const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
+          const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
+          const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
             item,
             index,
             props: slotProps
@@ -12589,7 +12593,7 @@ const VAutocomplete = genericComponent()({
             "key": item.value,
             "class": ['v-autocomplete__selection', index === selectionIndex.value && ['v-autocomplete__selection--selected', textColorClasses.value]],
             "style": index === selectionIndex.value ? textColorStyles.value : {}
-          }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
+          }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
             "size": "small",
@@ -16028,14 +16032,16 @@ const VCombobox = genericComponent()({
       return props.multiple ? transformed : transformed[0] ?? null;
     });
     const form = useForm();
-    const _search = shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
+    const hasChips = computed(() => !!(props.chips || slots.chip));
+    const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection);
+    const _search = shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
     const search = computed({
       get: () => {
         return _search.value;
       },
       set: val => {
         _search.value = val ?? '';
-        if (!props.multiple) {
+        if (!props.multiple && !hasSelectionSlot.value) {
           model.value = [transformItem$3(props, val)];
         }
         if (val && props.multiple && props.delimiters?.length) {
@@ -16066,7 +16072,7 @@ const VCombobox = genericComponent()({
       emit('update:search', value);
     });
     watch(model, value => {
-      if (!props.multiple) {
+      if (!props.multiple && !hasSelectionSlot.value) {
         _search.value = value[0]?.title ?? '';
       }
     });
@@ -16131,6 +16137,10 @@ const VCombobox = genericComponent()({
       if (e.key === 'ArrowDown' && highlightFirst.value) {
         listRef.value?.focus('next');
       }
+      if (e.key === 'Enter' && search.value) {
+        select(transformItem$3(props, search.value));
+        if (hasSelectionSlot.value) search.value = '';
+      }
       if (!props.multiple) return;
       if (['Backspace', 'Delete'].includes(e.key)) {
         if (selectionIndex.value < 0) {
@@ -16164,10 +16174,6 @@ const VCombobox = genericComponent()({
           vTextFieldRef.value.setSelectionRange(0, 0);
         }
       }
-      if (e.key === 'Enter' && search.value) {
-        select(transformItem$3(props, search.value));
-        search.value = '';
-      }
     }
     function onAfterLeave() {
       if (isFocused.value) {
@@ -16178,6 +16184,7 @@ const VCombobox = genericComponent()({
     /** @param set - null means toggle */
     function select(item) {
       let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (item.props.disabled) return;
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
         const add = set == null ? !~index : set;
@@ -16194,7 +16201,7 @@ const VCombobox = genericComponent()({
       } else {
         const add = set !== false;
         model.value = add ? [item] : [];
-        _search.value = add ? item.title : '';
+        _search.value = add && !hasSelectionSlot.value ? item.title : '';
 
         // watch for search watcher to trigger
         nextTick(() => {
@@ -16226,7 +16233,7 @@ const VCombobox = genericComponent()({
         return value === displayItems.value[0].value;
       })) {
         select(displayItems.value[0]);
-      } else if (props.multiple && search.value) {
+      } else if (search.value) {
         select(transformItem$3(props, search.value));
       }
     });
@@ -16238,17 +16245,11 @@ const VCombobox = genericComponent()({
         });
       }
     });
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return;
-      if (!val.length && props.hideNoData) {
-        menu.value = false;
-      }
-      if (!oldVal.length && val.length) {
-        menu.value = true;
-      }
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return;
+      menu.value = true;
     });
     useRender(() => {
-      const hasChips = !!(props.chips || slots.chip);
       const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
       const isDirty = model.value.length > 0;
       const textFieldProps = VTextField.filterProps(props);
@@ -16265,7 +16266,7 @@ const VCombobox = genericComponent()({
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
           'v-combobox--chips': !!props.chips,
-          'v-combobox--selection-slot': !!slots.selection,
+          'v-combobox--selection-slot': !!hasSelectionSlot.value,
           'v-combobox--selecting-index': selectionIndex.value > -1,
           [`v-combobox--${props.multiple ? 'multiple' : 'single'}`]: true
         }, props.class],
@@ -16367,8 +16368,8 @@ const VCombobox = genericComponent()({
             modelValue: true,
             'onUpdate:modelValue': undefined
           };
-          const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
-          const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
+          const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
+          const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
             item,
             index,
             props: slotProps
@@ -16381,7 +16382,7 @@ const VCombobox = genericComponent()({
             "key": item.value,
             "class": ['v-combobox__selection', index === selectionIndex.value && ['v-combobox__selection--selected', textColorClasses.value]],
             "style": index === selectionIndex.value ? textColorStyles.value : {}
-          }, [hasChips ? !slots.chip ? createVNode(VChip, mergeProps({
+          }, [hasChips.value ? !slots.chip ? createVNode(VChip, mergeProps({
             "key": "chip",
             "closable": props.closableChips,
             "size": "small",
@@ -25734,7 +25735,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.6";
+const version$1 = "3.5.7";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25759,7 +25760,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.5.6";
+const version = "3.5.7";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };