vuetify 3.5.5 → 3.5.7

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.5
+* Vuetify v3.5.7
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -6885,7 +6885,8 @@
               id,
               messagesId,
               isDisabled,
-              isReadonly
+              isReadonly,
+              isValid
             } = _ref2;
             return vue.createVNode(VCheckboxBtn, vue.mergeProps(checkboxProps, {
               "id": id.value,
@@ -6893,6 +6894,7 @@
               "disabled": isDisabled.value,
               "readonly": isReadonly.value
             }, controlAttrs, {
+              "error": isValid.value === false,
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event,
               "onFocus": focus,
@@ -11842,20 +11844,27 @@
           model.value = [item];
         }
       }
+
+      /** @param set - null means toggle */
       function select(item) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        const add = index === -1;
+        let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        if (item.props.disabled) return;
         if (props.multiple) {
-          if (add) {
-            model.value = [...model.value, item];
-          } else {
-            const value = [...model.value];
+          const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.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;
+          vue.nextTick(() => {
+            menu.value = false;
+          });
         }
       }
       function onBlur(e) {
@@ -11889,14 +11898,9 @@
           });
         }
       });
-      vue.watch(displayItems, (val, oldVal) => {
-        if (!isFocused.value) return;
-        if (!val.length && props.hideNoData) {
-          menu.value = false;
-        }
-        if (!oldVal.length && val.length) {
-          menu.value = true;
-        }
+      vue.watch(() => props.items, val => {
+        if (!isFocused.value || !val.length || menu.value) return;
+        menu.value = true;
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
@@ -11974,7 +11978,7 @@
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
                     key: index,
-                    onClick: () => select(item)
+                    onClick: () => select(item, null)
                   });
                   return slots.item?.({
                     item,
@@ -12006,7 +12010,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item);
+              select(item, false);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -12116,7 +12120,7 @@
         if (typeof item === 'object') {
           const filterKeys = keys || Object.keys(transformed);
           for (const key of filterKeys) {
-            const value = getPropertyFromItem(transformed, key, transformed);
+            const value = getPropertyFromItem(transformed, key);
             const keyFilter = options?.customKeyFilter?.[key];
             match = keyFilter ? keyFilter(value, query, item) : filter(value, query, item);
             if (match !== -1 && match !== false) {
@@ -12281,6 +12285,8 @@
         }
         return filteredItems.value;
       });
+      const hasChips = vue.computed(() => !!(props.chips || slots.chip));
+      const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
       const selectedValues = vue.computed(() => model.value.map(selection => selection.props.value));
       const highlightFirst = vue.computed(() => {
         const selectFirst = props.autoSelectFirst === true || props.autoSelectFirst === 'exact' && search.value === displayItems.value[0]?.title;
@@ -12339,7 +12345,7 @@
           }
           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') {
@@ -12390,35 +12396,41 @@
         if (v == null || v === '' && !props.multiple) model.value = [];
       }
       const isSelecting = vue.shallowRef(false);
+
+      /** @param set - null means toggle */
       function select(item) {
+        let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         if (item.props.disabled) return;
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        const add = index === -1;
         if (props.multiple) {
-          if (add) {
-            model.value = [...model.value, item];
-          } else {
-            const value = [...model.value];
+          const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.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;
-          vue.nextTick(() => isSelecting.value = false);
+          search.value = add && !hasSelectionSlot.value ? item.title : '';
+
+          // watch for search watcher to trigger
+          vue.nextTick(() => {
+            menu.value = false;
+            isPristine.value = true;
+          });
         }
       }
       vue.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;
           vue.nextTick(() => isSelecting.value = false);
         } else {
@@ -12448,17 +12460,11 @@
           });
         }
       });
-      vue.watch(displayItems, (val, oldVal) => {
-        if (!isFocused.value) return;
-        if (!val.length && props.hideNoData) {
-          menu.value = false;
-        }
-        if (!oldVal.length && val.length) {
-          menu.value = true;
-        }
+      vue.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);
@@ -12476,7 +12482,7 @@
           "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,
@@ -12531,13 +12537,15 @@
                     ref: itemRef,
                     key: index,
                     active: highlightFirst.value && index === 0 ? true : undefined,
-                    onClick: () => select(item)
+                    onClick: () => select(item, null)
                   });
                   return slots.item?.({
                     item,
                     index,
                     props: itemProps
-                  }) ?? vue.createVNode(VListItem, itemProps, {
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
                     prepend: _ref4 => {
                       let {
                         isSelected
@@ -12564,7 +12572,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item);
+              select(item, false);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -12575,8 +12583,8 @@
               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 +12597,7 @@
               "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 ? vue.createVNode(VChip, vue.mergeProps({
+            }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
               "size": "small",
@@ -16028,14 +16036,16 @@
         return props.multiple ? transformed : transformed[0] ?? null;
       });
       const form = useForm();
-      const _search = vue.shallowRef(!props.multiple ? model.value[0]?.title ?? '' : '');
+      const hasChips = vue.computed(() => !!(props.chips || slots.chip));
+      const hasSelectionSlot = vue.computed(() => hasChips.value || !!slots.selection);
+      const _search = vue.shallowRef(!props.multiple && !hasSelectionSlot.value ? model.value[0]?.title ?? '' : '');
       const search = vue.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 +16076,7 @@
         emit('update:search', value);
       });
       vue.watch(model, value => {
-        if (!props.multiple) {
+        if (!props.multiple && !hasSelectionSlot.value) {
           _search.value = value[0]?.title ?? '';
         }
       });
@@ -16131,6 +16141,10 @@
         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 +16178,6 @@
             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 +16188,7 @@
       /** @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 +16205,7 @@
         } 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
           vue.nextTick(() => {
@@ -16226,7 +16237,7 @@
           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 +16249,11 @@
           });
         }
       });
-      vue.watch(displayItems, (val, oldVal) => {
-        if (!isFocused.value) return;
-        if (!val.length && props.hideNoData) {
-          menu.value = false;
-        }
-        if (!oldVal.length && val.length) {
-          menu.value = true;
-        }
+      vue.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 +16270,7 @@
           "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],
@@ -16327,7 +16332,9 @@
                     item,
                     index,
                     props: itemProps
-                  }) ?? vue.createVNode(VListItem, itemProps, {
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
                     prepend: _ref4 => {
                       let {
                         isSelected
@@ -16365,8 +16372,8 @@
               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
@@ -16379,7 +16386,7 @@
               "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 ? vue.createVNode(VChip, vue.mergeProps({
+            }, [hasChips.value ? !slots.chip ? vue.createVNode(VChip, vue.mergeProps({
               "key": "chip",
               "closable": props.closableChips,
               "size": "small",
@@ -17670,7 +17677,7 @@
     return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
       const timeElapsed = currentTime - startTime;
       const progress = timeElapsed / options.duration;
-      const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(Math.max(progress, 1)));
+      const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(clamp(progress, 0, 1)));
       container[property] = location;
 
       // Allow for some jitter if target time has elapsed
@@ -21094,6 +21101,7 @@
   const makeVExpansionPanelsProps = propsFactory({
     color: String,
     flat: Boolean,
+    focusable: Boolean,
     static: Boolean,
     tile: Boolean,
     variant: {
@@ -21128,6 +21136,7 @@
           readonly: vue.toRef(props, 'readonly')
         },
         VExpansionPanelTitle: {
+          focusable: vue.toRef(props, 'focusable'),
           static: vue.toRef(props, 'static')
         }
       });
@@ -21186,6 +21195,7 @@
       default: '$collapse'
     },
     hideActions: Boolean,
+    focusable: Boolean,
     static: Boolean,
     ripple: {
       type: [Boolean, Object],
@@ -21220,6 +21230,7 @@
       useRender(() => vue.withDirectives(vue.createVNode("button", {
         "class": ['v-expansion-panel-title', {
           'v-expansion-panel-title--active': expansionPanel.isSelected.value,
+          'v-expansion-panel-title--focusable': props.focusable,
           'v-expansion-panel-title--static': props.static
         }, backgroundColorClasses.value, props.class],
         "style": [backgroundColorStyles.value, props.style],
@@ -25392,6 +25403,7 @@
     VDataIterator: VDataIterator,
     VDataTable: VDataTable,
     VDataTableFooter: VDataTableFooter,
+    VDataTableHeaders: VDataTableHeaders,
     VDataTableRow: VDataTableRow,
     VDataTableRows: VDataTableRows,
     VDataTableServer: VDataTableServer,
@@ -25727,7 +25739,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.5";
+  const version$1 = "3.5.7";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25752,7 +25764,7 @@
       ...options
     });
   };
-  const version = "3.5.5";
+  const version = "3.5.7";
   createVuetify.version = version;
 
   exports.components = components;