vuetify 3.7.10 → 3.7.12

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.7.10
+* Vuetify v3.7.12
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, onUnmounted, createTextVNode, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, Fragment, reactive, computed, watchEffect, toRefs, capitalize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, camelize, h, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -500,6 +500,9 @@ function checkPrintable(e) {
   const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey;
   return isPrintableChar && noModifier;
 }
+function isPrimitive(value) {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint';
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -5578,11 +5581,13 @@ const ripples = {
     animation.classList.add('v-ripple__animation--visible');
     transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`);
     animation.dataset.activated = String(performance.now());
-    setTimeout(() => {
-      animation.classList.remove('v-ripple__animation--enter');
-      animation.classList.add('v-ripple__animation--in');
-      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
-    }, 0);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        animation.classList.remove('v-ripple__animation--enter');
+        animation.classList.add('v-ripple__animation--in');
+        transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
+      });
+    });
   },
   hide(el) {
     if (!el?._ripple?.enabled) return;
@@ -8577,12 +8582,12 @@ const independentSelectStrategy = mandatory => {
       return selected;
     },
     in: (v, children, parents) => {
-      let map = new Map();
+      const map = new Map();
       for (const id of v || []) {
-        map = strategy.select({
+        strategy.select({
           id,
           value: true,
-          selected: new Map(map),
+          selected: map,
           children,
           parents
         });
@@ -8617,11 +8622,10 @@ const independentSingleSelectStrategy = mandatory => {
       });
     },
     in: (v, children, parents) => {
-      let map = new Map();
       if (v?.length) {
-        map = parentStrategy.in(v.slice(0, 1), children, parents);
+        return parentStrategy.in(v.slice(0, 1), children, parents);
       }
-      return map;
+      return new Map();
     },
     out: (v, children, parents) => {
       return parentStrategy.out(v, children, parents);
@@ -8724,7 +8728,7 @@ const classicSelectStrategy = mandatory => {
         map = strategy.select({
           id,
           value: true,
-          selected: new Map(map),
+          selected: map,
           children,
           parents
         });
@@ -9608,10 +9612,7 @@ const makeItemsProps = propsFactory({
     default: 'props'
   },
   returnObject: Boolean,
-  valueComparator: {
-    type: Function,
-    default: deepEqual
-  }
+  valueComparator: Function
 }, 'list-items');
 function transformItem$3(props, item) {
   const title = getPropertyFromItem(item, props.itemTitle, item);
@@ -9632,29 +9633,85 @@ function transformItem$3(props, item) {
   };
 }
 function transformItems$3(props, items) {
+  const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
   const array = [];
   for (const item of items) {
-    array.push(transformItem$3(props, item));
+    array.push(transformItem$3(_props, item));
   }
   return array;
 }
 function useItems(props) {
   const items = computed(() => transformItems$3(props, props.items));
   const hasNullItem = computed(() => items.value.some(item => item.value === null));
+  const itemsMap = shallowRef(new Map());
+  const keylessItems = shallowRef([]);
+  watchEffect(() => {
+    const _items = items.value;
+    const map = new Map();
+    const keyless = [];
+    for (let i = 0; i < _items.length; i++) {
+      const item = _items[i];
+      if (isPrimitive(item.value) || item.value === null) {
+        let values = map.get(item.value);
+        if (!values) {
+          values = [];
+          map.set(item.value, values);
+        }
+        values.push(item);
+      } else {
+        keyless.push(item);
+      }
+    }
+    itemsMap.value = map;
+    keylessItems.value = keyless;
+  });
   function transformIn(value) {
-    if (!hasNullItem.value) {
+    // Cache unrefed values outside the loop,
+    // proxy getters can be slow when you call them a billion times
+    const _value = toRaw(value);
+    const _items = itemsMap.value;
+    const _allItems = items.value;
+    const _keylessItems = keylessItems.value;
+    const _hasNullItem = hasNullItem.value;
+    const _returnObject = props.returnObject;
+    const hasValueComparator = !!props.valueComparator;
+    const valueComparator = props.valueComparator || deepEqual;
+    const _props = pick(props, ['itemTitle', 'itemValue', 'itemChildren', 'itemProps', 'returnObject', 'valueComparator']);
+    const returnValue = [];
+    main: for (const v of _value) {
       // When the model value is null, return an InternalItem
       // based on null only if null is one of the items
-      value = value.filter(v => v !== null);
-    }
-    return value.map(v => {
-      if (props.returnObject && typeof v === 'string') {
-        // String model value means value is a custom input value from combobox
-        // Don't look up existing items if the model value is a string
-        return transformItem$3(props, v);
+      if (!_hasNullItem && v === null) continue;
+
+      // String model value means value is a custom input value from combobox
+      // Don't look up existing items if the model value is a string
+      if (_returnObject && typeof v === 'string') {
+        returnValue.push(transformItem$3(_props, v));
+        continue;
       }
-      return items.value.find(item => props.valueComparator(v, item.value)) || transformItem$3(props, v);
-    });
+
+      // Fast path, items with primitive values and no
+      // custom valueComparator can use a constant-time
+      // map lookup instead of searching the items array
+      const fastItems = _items.get(v);
+
+      // Slow path, always use valueComparator.
+      // This is O(n^2) so we really don't want to
+      // do it for more than a couple hundred items.
+      if (hasValueComparator || !fastItems) {
+        for (const item of hasValueComparator ? _allItems : _keylessItems) {
+          if (valueComparator(v, item.value)) {
+            returnValue.push(item);
+            continue main;
+          }
+        }
+        // Not an existing item, construct it from the model (#4000)
+        returnValue.push(transformItem$3(_props, v));
+        continue;
+      }
+      returnValue.push(...fastItems);
+    }
+    return returnValue;
   }
   function transformOut(value) {
     return props.returnObject ? value.map(_ref => {
@@ -9678,9 +9735,6 @@ function useItems(props) {
 
 // Types
 
-function isPrimitive(value) {
-  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
-}
 function transformItem$2(props, item) {
   const type = getPropertyFromItem(item, props.itemType, 'item');
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
@@ -12633,34 +12687,6 @@ function useScrolling(listRef, textFieldRef) {
   }; // typescript doesn't know about vue's event merging
 }
 
-// https://github.com/vuetifyjs/vuetify/issues/20003
-/**
- * This composable is designed to track whether the mouse is in a mousedown state at any given time. The original motivation is that
- * it is impossible to distinguish whether a blur event is triggered by mousedown, keydown, or via JavaScript.
- * This composable allows for conditional logic when a blur is triggered by mousedown.
- */
-
-function useIsMousedown() {
-  const isMousedown = shallowRef(false);
-  function mousedown() {
-    isMousedown.value = true;
-  }
-  function mouseup() {
-    isMousedown.value = false;
-  }
-  onMounted(() => {
-    document.body.addEventListener('mousedown', mousedown);
-    document.body.addEventListener('mouseup', mouseup);
-  });
-  onUnmounted(() => {
-    document.body.removeEventListener('mousedown', mousedown);
-    document.body.removeEventListener('mouseup', mouseup);
-  });
-  return {
-    isMousedown
-  };
-}
-
 // Types
 
 const makeSelectProps = propsFactory({
@@ -12750,9 +12776,6 @@ const VSelect = genericComponent()({
       return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : model.value.length;
     });
     const form = useForm(props);
-    const {
-      isMousedown
-    } = useIsMousedown();
     const selectedValues = computed(() => model.value.map(selection => selection.value));
     const isFocused = shallowRef(false);
     const label = computed(() => menu.value ? props.closeText : props.openText);
@@ -12760,7 +12783,7 @@ const VSelect = genericComponent()({
     let keyboardLookupLastTime;
     const displayItems = computed(() => {
       if (props.hideSelected) {
-        return items.value.filter(item => !model.value.some(s => props.valueComparator(s, item)));
+        return items.value.filter(item => !model.value.some(s => (props.valueComparator || deepEqual)(s, item)));
       }
       return items.value;
     });
@@ -12832,7 +12855,7 @@ const VSelect = genericComponent()({
       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 index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
         const add = set == null ? !~index : set;
         if (~index) {
           const value = add ? [...model.value, item] : [...model.value];
@@ -12850,7 +12873,7 @@ const VSelect = genericComponent()({
       }
     }
     function onBlur(e) {
-      if (!listRef.value?.$el.contains(e.relatedTarget) && !isMousedown.value) {
+      if (!listRef.value?.$el.contains(e.relatedTarget)) {
         menu.value = false;
       }
     }
@@ -12879,7 +12902,7 @@ const VSelect = genericComponent()({
     }
     watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
-        const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
+        const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
         IN_BROWSER && window.requestAnimationFrame(() => {
           index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
         });
@@ -13262,9 +13285,6 @@ const VAutocomplete = genericComponent()({
       textColorClasses,
       textColorStyles
     } = useTextColor(color);
-    const {
-      isMousedown
-    } = useIsMousedown();
     const search = useProxiedModel(props, 'search', '');
     const model = useProxiedModel(props, 'modelValue', [], v => transformIn(v === null ? [null] : wrapInArray(v)), v => {
       const transformed = transformOut(v);
@@ -13414,7 +13434,7 @@ const VAutocomplete = genericComponent()({
       let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       if (!item || item.props.disabled) return;
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
+        const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
         const add = set == null ? !~index : set;
         if (~index) {
           const value = add ? [...model.value, item] : [...model.value];
@@ -13438,11 +13458,6 @@ const VAutocomplete = genericComponent()({
         });
       }
     }
-    function onBlur(e) {
-      if (!isMousedown.value) {
-        menu.value = false;
-      }
-    }
     watch(isFocused, (val, oldVal) => {
       if (val === oldVal) return;
       if (val) {
@@ -13452,6 +13467,7 @@ const VAutocomplete = genericComponent()({
         nextTick(() => isSelecting.value = false);
       } else {
         if (!props.multiple && search.value == null) model.value = [];
+        menu.value = false;
         if (!model.value.some(_ref3 => {
           let {
             title
@@ -13505,7 +13521,6 @@ const VAutocomplete = genericComponent()({
         "readonly": form.isReadonly.value,
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
-        "onBlur": onBlur,
         "onMousedown:control": onMousedownControl,
         "onKeydown": onKeydown
       }), {
@@ -15808,6 +15823,8 @@ const useSlider = _ref => {
   const trackContainerRef = ref();
   const activeThumbRef = ref();
   function parseMouseMove(e) {
+    const el = trackContainerRef.value?.$el;
+    if (!el) return;
     const vertical = props.direction === 'vertical';
     const start = vertical ? 'top' : 'left';
     const length = vertical ? 'height' : 'width';
@@ -15815,7 +15832,7 @@ const useSlider = _ref => {
     const {
       [start]: trackStart,
       [length]: trackLength
-    } = trackContainerRef.value?.$el.getBoundingClientRect();
+    } = el.getBoundingClientRect();
     const clickOffset = getPosition(e, position);
 
     // It is possible for left to be NaN, force to number
@@ -15824,13 +15841,17 @@ const useSlider = _ref => {
     return roundValue(min.value + clickPos * (max.value - min.value));
   }
   const handleStop = e => {
-    onSliderEnd({
-      value: parseMouseMove(e)
-    });
+    const value = parseMouseMove(e);
+    if (value != null) {
+      onSliderEnd({
+        value
+      });
+    }
     mousePressed.value = false;
     startOffset.value = 0;
   };
   const handleStart = e => {
+    const value = parseMouseMove(e);
     activeThumbRef.value = getActiveThumb(e);
     if (!activeThumbRef.value) return;
     mousePressed.value = true;
@@ -15838,13 +15859,17 @@ const useSlider = _ref => {
       startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
     } else {
       startOffset.value = 0;
-      onSliderMove({
-        value: parseMouseMove(e)
+      if (value != null) {
+        onSliderMove({
+          value
+        });
+      }
+    }
+    if (value != null) {
+      onSliderStart({
+        value
       });
     }
-    onSliderStart({
-      value: parseMouseMove(e)
-    });
     nextTick(() => activeThumbRef.value?.focus());
   };
   const moveListenerOptions = {
@@ -15852,9 +15877,12 @@ const useSlider = _ref => {
     capture: true
   };
   function onMouseMove(e) {
-    onSliderMove({
-      value: parseMouseMove(e)
-    });
+    const value = parseMouseMove(e);
+    if (value != null) {
+      onSliderMove({
+        value
+      });
+    }
   }
   function onSliderMouseUp(e) {
     e.stopPropagation();
@@ -17125,9 +17153,6 @@ const VCombobox = genericComponent()({
       return props.multiple ? transformed : transformed[0] ?? null;
     });
     const form = useForm(props);
-    const {
-      isMousedown
-    } = useIsMousedown();
     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 ?? '' : '');
@@ -17291,18 +17316,12 @@ const VCombobox = genericComponent()({
         vTextFieldRef.value?.focus();
       }
     }
-    function onBlur(e) {
-      if (!isMousedown.value) {
-        menu.value = false;
-      }
-    }
-
     /** @param set - null means toggle */
     function select(item) {
       let set = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       if (!item || item.props.disabled) return;
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
+        const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value));
         const add = set == null ? !~index : set;
         if (~index) {
           const value = add ? [...model.value, item] : [...model.value];
@@ -17341,6 +17360,7 @@ const VCombobox = genericComponent()({
     watch(isFocused, (val, oldVal) => {
       if (val || val === oldVal) return;
       selectionIndex.value = -1;
+      menu.value = false;
       if (search.value) {
         if (props.multiple) {
           select(transformItem$3(props, search.value));
@@ -17361,7 +17381,7 @@ const VCombobox = genericComponent()({
     });
     watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
-        const index = displayItems.value.findIndex(item => model.value.some(s => props.valueComparator(s.value, item.value)));
+        const index = displayItems.value.findIndex(item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value)));
         IN_BROWSER && window.requestAnimationFrame(() => {
           index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index);
         });
@@ -17398,7 +17418,6 @@ const VCombobox = genericComponent()({
         "readonly": form.isReadonly.value,
         "placeholder": isDirty ? undefined : props.placeholder,
         "onClick:clear": onClear,
-        "onBlur": onBlur,
         "onMousedown:control": onMousedownControl,
         "onKeydown": onKeydown
       }), {
@@ -21996,7 +22015,7 @@ const makeVDatePickerMonthProps = propsFactory({
     type: String,
     default: 'picker-reverse-transition'
   },
-  ...makeCalendarProps()
+  ...omit(makeCalendarProps(), ['displayValue'])
 }, 'VDatePickerMonth');
 const VDatePickerMonth = genericComponent()({
   name: 'VDatePickerMonth',
@@ -28377,7 +28396,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.10";
+const version$1 = "3.7.12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28402,7 +28421,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.7.10";
+const version = "3.7.12";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };