vuetify 3.5.3 → 3.5.5

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.3
+* Vuetify v3.5.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -539,6 +539,16 @@ function defer(timeout, cb) {
   const timeoutId = window.setTimeout(cb, timeout);
   return () => window.clearTimeout(timeoutId);
 }
+function isClickInsideElement(event, targetDiv) {
+  const mouseX = event.clientX;
+  const mouseY = event.clientY;
+  const divRect = targetDiv.getBoundingClientRect();
+  const divLeft = divRect.left;
+  const divTop = divRect.top;
+  const divRight = divRect.right;
+  const divBottom = divRect.bottom;
+  return mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom;
+}
 
 // Utilities
 const block = ['top', 'bottom'];
@@ -2150,7 +2160,7 @@ function provideLocale(props) {
   provide(LocaleSymbol, data);
   return data;
 }
-function genDefaults$2() {
+function genDefaults$3() {
   return {
     af: false,
     ar: true,
@@ -2197,7 +2207,7 @@ function genDefaults$2() {
   };
 }
 function createRtl(i18n, options) {
-  const rtl = ref(options?.rtl ?? genDefaults$2());
+  const rtl = ref(options?.rtl ?? genDefaults$3());
   const isRtl = computed(() => rtl.value[i18n.current.value] ?? false);
   return {
     isRtl,
@@ -2230,7 +2240,7 @@ const ThemeSymbol = Symbol.for('vuetify:theme');
 const makeThemeProps = propsFactory({
   theme: String
 }, 'theme');
-function genDefaults$1() {
+function genDefaults$2() {
   return {
     defaultTheme: 'light',
     variations: {
@@ -2317,8 +2327,8 @@ function genDefaults$1() {
   };
 }
 function parseThemeOptions() {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults$1();
-  const defaults = genDefaults$1();
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : genDefaults$2();
+  const defaults = genDefaults$2();
   if (!options) return {
     ...defaults,
     isDisabled: true
@@ -3101,12 +3111,14 @@ const makeRoundedProps = propsFactory({
   rounded: {
     type: [Boolean, Number, String],
     default: undefined
-  }
+  },
+  tile: Boolean
 }, 'rounded');
 function useRounded(props) {
   let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
   const roundedClasses = computed(() => {
     const rounded = isRef(props) ? props.value : props.rounded;
+    const tile = isRef(props) ? props.value : props.tile;
     const classes = [];
     if (rounded === true || rounded === '') {
       classes.push(`${name}--rounded`);
@@ -3114,6 +3126,8 @@ function useRounded(props) {
       for (const value of String(rounded).split(' ')) {
         classes.push(`rounded-${value}`);
       }
+    } else if (tile) {
+      classes.push('rounded-0');
     }
     return classes;
   });
@@ -4104,6 +4118,8 @@ function useGroupItem(props, injectKey) {
     vm.emit('group:selected', {
       value
     });
+  }, {
+    flush: 'sync'
   });
   return {
     id,
@@ -4439,23 +4455,27 @@ const VClassIcon = defineComponent({
     };
   }
 });
-const defaultSets = {
-  svg: {
-    component: VSvgIcon
-  },
-  class: {
-    component: VClassIcon
-  }
-};
+function genDefaults$1() {
+  return {
+    svg: {
+      component: VSvgIcon
+    },
+    class: {
+      component: VClassIcon
+    }
+  };
+}
 
 // Composables
 function createIcons(options) {
+  const sets = genDefaults$1();
+  const defaultSet = options?.defaultSet ?? 'mdi';
+  if (defaultSet === 'mdi' && !sets.mdi) {
+    sets.mdi = mdi;
+  }
   return mergeDeep({
-    defaultSet: 'mdi',
-    sets: {
-      ...defaultSets,
-      mdi
-    },
+    defaultSet,
+    sets,
     aliases: {
       ...aliases,
       /* eslint-disable max-len */
@@ -5891,7 +5911,7 @@ const VAvatar = genericComponent()({
       }, null) : props.text : createVNode(VDefaultsProvider, {
         "key": "content-defaults",
         "defaults": {
-          VAvatar: {
+          VImg: {
             cover: true,
             image: props.image
           },
@@ -5900,7 +5920,7 @@ const VAvatar = genericComponent()({
           }
         }
       }, {
-        default: () => [slots.default?.()]
+        default: () => [slots.default()]
       }), genOverlays(false, 'v-avatar')]
     }));
     return {};
@@ -6459,7 +6479,8 @@ function createForm(props) {
     errors.value = results;
     model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
   }, {
-    deep: true
+    deep: true,
+    flush: 'post'
   });
   provide(FormKey, {
     register: _ref => {
@@ -10563,9 +10584,9 @@ const VMenu = genericComponent()({
       unregister() {
         --openChildren.value;
       },
-      closeParents() {
+      closeParents(e) {
         setTimeout(() => {
-          if (!openChildren.value) {
+          if (!openChildren.value && (e == null || e && !isClickInsideElement(e, overlay.value.contentEl))) {
             isActive.value = false;
             parent?.closeParents();
           }
@@ -10598,8 +10619,8 @@ const VMenu = genericComponent()({
         document.removeEventListener('focusin', onFocusIn);
       }
     });
-    function onClickOutside() {
-      parent?.closeParents();
+    function onClickOutside(e) {
+      parent?.closeParents(e);
     }
     function onKeydown(e) {
       if (props.disabled) return;
@@ -11333,9 +11354,6 @@ function useVirtual(props, items) {
       });
     });
   });
-  watch(viewportHeight, (val, oldVal) => {
-    oldVal && calculateVisibleItems();
-  });
   onScopeDispose(() => {
     updateOffsets.clear();
   });
@@ -11358,6 +11376,17 @@ function useVirtual(props, items) {
   let lastScrollTop = 0;
   let scrollVelocity = 0;
   let lastScrollTime = 0;
+  watch(viewportHeight, (val, oldVal) => {
+    if (oldVal) {
+      calculateVisibleItems();
+      if (val < oldVal) {
+        requestAnimationFrame(() => {
+          scrollVelocity = 0;
+          calculateVisibleItems();
+        });
+      }
+    }
+  });
   function handleScroll() {
     if (!containerRef.value || !markerRef.value) return;
     const scrollTop = containerRef.value.scrollTop;
@@ -11810,9 +11839,10 @@ const VSelect = genericComponent()({
       }
     }
     function select(item) {
+      const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
+      const add = index === -1;
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        if (index === -1) {
+        if (add) {
           model.value = [...model.value, item];
         } else {
           const value = [...model.value];
@@ -11820,7 +11850,7 @@ const VSelect = genericComponent()({
           model.value = value;
         }
       } else {
-        model.value = [item];
+        model.value = add ? [item] : [];
         menu.value = false;
       }
     }
@@ -12357,11 +12387,11 @@ const VAutocomplete = genericComponent()({
     }
     const isSelecting = shallowRef(false);
     function select(item) {
-      let add = 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) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-        if (index === -1) {
+        if (add) {
           model.value = [...model.value, item];
         } else {
           const value = [...model.value];
@@ -12530,7 +12560,7 @@ const VAutocomplete = genericComponent()({
           function onChipClose(e) {
             e.stopPropagation();
             e.preventDefault();
-            select(item, false);
+            select(item);
           }
           const slotProps = {
             'onClick:close': onChipClose,
@@ -15802,8 +15832,8 @@ const VColorPicker = defineComponent({
   },
   setup(props) {
     const mode = useProxiedModel(props, 'mode');
-    const lastPickedColor = ref(null);
-    const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
+    const hue = ref(null);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => {
       if (v == null || v === '') return null;
       let c;
       try {
@@ -15812,24 +15842,36 @@ const VColorPicker = defineComponent({
         consoleWarn(err);
         return null;
       }
-      if (lastPickedColor.value) {
-        c = {
-          ...c,
-          h: lastPickedColor.value.h
-        };
-        lastPickedColor.value = null;
-      }
       return c;
     }, v => {
       if (!v) return null;
       return extractColor(v, props.modelValue);
     });
+    const currentColor = computed(() => {
+      return model.value ? {
+        ...model.value,
+        h: hue.value ?? model.value.h
+      } : null;
+    });
     const {
       rtlClasses
     } = useRtl();
+    let externalChange = true;
+    watch(model, v => {
+      if (!externalChange) {
+        // prevent hue shift from rgb conversion inaccuracy
+        externalChange = true;
+        return;
+      }
+      if (!v) return;
+      hue.value = v.h;
+    }, {
+      immediate: true
+    });
     const updateColor = hsva => {
-      currentColor.value = hsva;
-      lastPickedColor.value = hsva;
+      externalChange = false;
+      hue.value = hsva.h;
+      model.value = hsva;
     };
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
@@ -17599,7 +17641,8 @@ function createGoTo(options, locale) {
   };
 }
 async function scrollTo(_target, _options, horizontal, goTo) {
-  const options = mergeDeep(goTo?.options, _options);
+  const property = horizontal ? 'scrollLeft' : 'scrollTop';
+  const options = mergeDeep(goTo?.options ?? genDefaults(), _options);
   const rtl = goTo?.rtl.value;
   const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0;
   const container = options.container === 'parent' && target instanceof HTMLElement ? target.parentElement : getContainer(options.container);
@@ -17617,25 +17660,22 @@ async function scrollTo(_target, _options, horizontal, goTo) {
     }
   }
   targetLocation += options.offset;
-  const startLocation = (horizontal ? container.scrollLeft : container.scrollTop) ?? 0;
+  const startLocation = container[property] ?? 0;
   if (targetLocation === startLocation) return Promise.resolve(targetLocation);
   const startTime = performance.now();
   return new Promise(resolve => requestAnimationFrame(function step(currentTime) {
     const timeElapsed = currentTime - startTime;
-    const progress = Math.abs(options.duration ? Math.min(timeElapsed / options.duration, 1) : 1);
-    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress));
-    container[horizontal ? 'scrollLeft' : 'scrollTop'] = location;
-    if (progress === 1) return resolve(targetLocation);
-    let clientSize;
-    let reachEnd;
-    if (!horizontal) {
-      clientSize = container === document.body ? document.documentElement.clientHeight : container.clientHeight;
-      reachEnd = clientSize + container.scrollTop >= container.scrollHeight;
-      if (targetLocation > container.scrollTop && reachEnd) return resolve(targetLocation);
-    } else {
-      clientSize = container === document.body ? document.documentElement.clientWidth : container.clientWidth;
-      reachEnd = clientSize + container.scrollLeft >= container.scrollWidth;
-      if (targetLocation > container.scrollLeft && reachEnd) return resolve(targetLocation);
+    const progress = timeElapsed / options.duration;
+    const location = Math.floor(startLocation + (targetLocation - startLocation) * ease(Math.max(progress, 1)));
+    container[property] = location;
+
+    // Allow for some jitter if target time has elapsed
+    if (progress >= 1 && Math.abs(location - container[property]) < 10) {
+      return resolve(targetLocation);
+    } else if (progress > 2) {
+      // The target might not be reachable
+      consoleWarn('Scroll target is not reachable');
+      return resolve(container[property]);
     }
     requestAnimationFrame(step);
   }));
@@ -20572,12 +20612,13 @@ const VDatePickerMonth = genericComponent()({
       }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
         "defaults": {
           VBtn: {
+            class: 'v-date-picker-month__day-btn',
             color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
             disabled: item.isDisabled,
             icon: true,
             ripple: false,
             text: item.localized,
-            variant: item.isDisabled ? 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
+            variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
             onClick: () => onClick(item.date)
           }
         }
@@ -20603,6 +20644,7 @@ const VDatePickerMonths = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const adapter = useDate();
@@ -20638,6 +20680,10 @@ const VDatePickerMonths = genericComponent()({
         onClick: () => onClick(i)
       };
       function onClick(i) {
+        if (model.value === i) {
+          emit('update:modelValue', model.value);
+          return;
+        }
         model.value = i;
       }
       return slots.month?.({
@@ -20646,9 +20692,7 @@ const VDatePickerMonths = genericComponent()({
         props: btnProps
       }) ?? createVNode(VBtn, mergeProps({
         "key": "month"
-      }, btnProps, {
-        "onClick": () => onClick(i)
-      }), null);
+      }, btnProps), null);
     })])]));
     return {};
   }
@@ -20673,6 +20717,7 @@ const VDatePickerYears = genericComponent()({
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const adapter = useDate();
@@ -20723,7 +20768,13 @@ const VDatePickerYears = genericComponent()({
         rounded: true,
         text: year.text,
         variant: model.value === year.value ? 'flat' : 'text',
-        onClick: () => model.value = year.value
+        onClick: () => {
+          if (model.value === year.value) {
+            emit('update:modelValue', model.value);
+            return;
+          }
+          model.value = year.value;
+        }
       };
       return slots.year?.({
         year,
@@ -20873,7 +20924,7 @@ const VDatePicker = genericComponent()({
       return props.multiple && model.value.length > 1 ? t('$vuetify.datePicker.itemsSelected', model.value.length) : model.value[0] && adapter.isValid(model.value[0]) ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header);
     });
     const text = computed(() => {
-      return adapter.format(adapter.parseISO(`${year.value}-${month.value + 1}-01`), 'monthAndYear');
+      return adapter.format(adapter.date(new Date(year.value, month.value, 1)), 'monthAndYear');
     });
     // const headerIcon = computed(() => props.inputMode === 'calendar' ? props.keyboardIcon : props.calendarIcon)
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -20916,7 +20967,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value++;
         month.value = 0;
+        onUpdateYear(year.value);
       }
+      onUpdateMonth(month.value);
     }
     function onClickPrev() {
       if (month.value > 0) {
@@ -20924,7 +20977,9 @@ const VDatePicker = genericComponent()({
       } else {
         year.value--;
         month.value = 11;
+        onUpdateYear(year.value);
       }
+      onUpdateMonth(month.value);
     }
     function onClickDate() {
       viewMode.value = 'month';
@@ -20935,14 +20990,14 @@ const VDatePicker = genericComponent()({
     function onClickYear() {
       viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
     }
-    watch(month, () => {
+    function onUpdateMonth(value) {
       if (viewMode.value === 'months') onClickMonth();
-      emit('update:month', month.value);
-    });
-    watch(year, () => {
+      emit('update:month', value);
+    }
+    function onUpdateYear(value) {
       if (viewMode.value === 'year') onClickYear();
-      emit('update:year', year.value);
-    });
+      emit('update:year', value);
+    }
     watch(model, (val, oldVal) => {
       const before = adapter.date(wrapInArray(val)[0]);
       const after = adapter.date(wrapInArray(oldVal)[0]);
@@ -20998,14 +21053,14 @@ const VDatePicker = genericComponent()({
             "key": "date-picker-months"
           }, datePickerMonthsProps, {
             "modelValue": month.value,
-            "onUpdate:modelValue": $event => month.value = $event,
+            "onUpdate:modelValue": [$event => month.value = $event, onUpdateMonth],
             "min": minDate.value,
             "max": maxDate.value
           }), null) : viewMode.value === 'year' ? createVNode(VDatePickerYears, mergeProps({
             "key": "date-picker-years"
           }, datePickerYearsProps, {
             "modelValue": year.value,
-            "onUpdate:modelValue": $event => year.value = $event,
+            "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
           }), null) : createVNode(VDatePickerMonth, mergeProps({
@@ -21014,9 +21069,9 @@ const VDatePicker = genericComponent()({
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
             "month": month.value,
-            "onUpdate:month": $event => month.value = $event,
+            "onUpdate:month": [$event => month.value = $event, onUpdateMonth],
             "year": year.value,
-            "onUpdate:year": $event => year.value = $event,
+            "onUpdate:year": [$event => year.value = $event, onUpdateYear],
             "min": minDate.value,
             "max": maxDate.value
           }), null)]
@@ -21034,7 +21089,9 @@ const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
 const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
 const makeVExpansionPanelsProps = propsFactory({
   color: String,
+  flat: Boolean,
   static: Boolean,
+  tile: Boolean,
   variant: {
     type: String,
     default: 'default',
@@ -21064,12 +21121,17 @@ const VExpansionPanels = genericComponent()({
     provideDefaults({
       VExpansionPanel: {
         color: toRef(props, 'color'),
-        readonly: toRef(props, 'readonly'),
+        readonly: toRef(props, 'readonly')
+      },
+      VExpansionPanelTitle: {
         static: toRef(props, 'static')
       }
     });
     useRender(() => createVNode(props.tag, {
-      "class": ['v-expansion-panels', themeClasses.value, variantClass.value, props.class],
+      "class": ['v-expansion-panels', {
+        'v-expansion-panels--flat': props.flat,
+        'v-expansion-panels--tile': props.tile
+      }, themeClasses.value, variantClass.value, props.class],
       "style": props.style
     }, slots));
     return {};
@@ -21353,7 +21415,7 @@ const VFileInput = genericComponent()({
       if (!isFocused.value) focus();
     }
     function onClickPrepend(e) {
-      onControlClick(e);
+      inputRef.value?.click();
     }
     function onControlMousedown(e) {
       emit('mousedown:control', e);
@@ -23807,12 +23869,11 @@ const VSnackbar = genericComponent()({
         "scrollStrategy": "none",
         "_disableGlobalStack": true
       }, scopeId), {
-        default: () => [genOverlays(false, 'v-snackbar'), props.timer && createVNode("div", {
+        default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && createVNode("div", {
           "key": "timer",
           "class": "v-snackbar__timer"
         }, [createVNode(VProgressLinear, {
           "ref": timerRef,
-          "active": !isHovering.value,
           "color": typeof props.timer === 'string' ? props.timer : 'info',
           "max": props.timeout,
           "model-value": countdown.time.value
@@ -25662,7 +25723,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.5.3";
+const version$1 = "3.5.5";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -25687,7 +25748,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.5.3";
+const version = "3.5.5";
 createVuetify.version = version;
 
 export { components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };