vuetify 3.5.3 → 3.5.5

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.3
+* Vuetify v3.5.5
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -543,6 +543,16 @@
     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'];
@@ -2154,7 +2164,7 @@
     vue.provide(LocaleSymbol, data);
     return data;
   }
-  function genDefaults$2() {
+  function genDefaults$3() {
     return {
       af: false,
       ar: true,
@@ -2201,7 +2211,7 @@
     };
   }
   function createRtl(i18n, options) {
-    const rtl = vue.ref(options?.rtl ?? genDefaults$2());
+    const rtl = vue.ref(options?.rtl ?? genDefaults$3());
     const isRtl = vue.computed(() => rtl.value[i18n.current.value] ?? false);
     return {
       isRtl,
@@ -2234,7 +2244,7 @@
   const makeThemeProps = propsFactory({
     theme: String
   }, 'theme');
-  function genDefaults$1() {
+  function genDefaults$2() {
     return {
       defaultTheme: 'light',
       variations: {
@@ -2321,8 +2331,8 @@
     };
   }
   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
@@ -3105,12 +3115,14 @@
     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 = vue.computed(() => {
       const rounded = vue.isRef(props) ? props.value : props.rounded;
+      const tile = vue.isRef(props) ? props.value : props.tile;
       const classes = [];
       if (rounded === true || rounded === '') {
         classes.push(`${name}--rounded`);
@@ -3118,6 +3130,8 @@
         for (const value of String(rounded).split(' ')) {
           classes.push(`rounded-${value}`);
         }
+      } else if (tile) {
+        classes.push('rounded-0');
       }
       return classes;
     });
@@ -4108,6 +4122,8 @@
       vm.emit('group:selected', {
         value
       });
+    }, {
+      flush: 'sync'
     });
     return {
       id,
@@ -4443,23 +4459,27 @@
       };
     }
   });
-  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 */
@@ -5895,7 +5915,7 @@
         }, null) : props.text : vue.createVNode(VDefaultsProvider, {
           "key": "content-defaults",
           "defaults": {
-            VAvatar: {
+            VImg: {
               cover: true,
               image: props.image
             },
@@ -5904,7 +5924,7 @@
             }
           }
         }, {
-          default: () => [slots.default?.()]
+          default: () => [slots.default()]
         }), genOverlays(false, 'v-avatar')]
       }));
       return {};
@@ -6463,7 +6483,8 @@
       errors.value = results;
       model.value = invalid > 0 ? false : valid === items.value.length ? true : null;
     }, {
-      deep: true
+      deep: true,
+      flush: 'post'
     });
     vue.provide(FormKey, {
       register: _ref => {
@@ -10567,9 +10588,9 @@
         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();
             }
@@ -10602,8 +10623,8 @@
           document.removeEventListener('focusin', onFocusIn);
         }
       });
-      function onClickOutside() {
-        parent?.closeParents();
+      function onClickOutside(e) {
+        parent?.closeParents(e);
       }
       function onKeydown(e) {
         if (props.disabled) return;
@@ -11337,9 +11358,6 @@
         });
       });
     });
-    vue.watch(viewportHeight, (val, oldVal) => {
-      oldVal && calculateVisibleItems();
-    });
     vue.onScopeDispose(() => {
       updateOffsets.clear();
     });
@@ -11362,6 +11380,17 @@
     let lastScrollTop = 0;
     let scrollVelocity = 0;
     let lastScrollTime = 0;
+    vue.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;
@@ -11814,9 +11843,10 @@
         }
       }
       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];
@@ -11824,7 +11854,7 @@
             model.value = value;
           }
         } else {
-          model.value = [item];
+          model.value = add ? [item] : [];
           menu.value = false;
         }
       }
@@ -12361,11 +12391,11 @@
       }
       const isSelecting = vue.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];
@@ -12534,7 +12564,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item, false);
+              select(item);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -15806,8 +15836,8 @@
     },
     setup(props) {
       const mode = useProxiedModel(props, 'mode');
-      const lastPickedColor = vue.ref(null);
-      const currentColor = useProxiedModel(props, 'modelValue', undefined, v => {
+      const hue = vue.ref(null);
+      const model = useProxiedModel(props, 'modelValue', undefined, v => {
         if (v == null || v === '') return null;
         let c;
         try {
@@ -15816,24 +15846,36 @@
           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 = vue.computed(() => {
+        return model.value ? {
+          ...model.value,
+          h: hue.value ?? model.value.h
+        } : null;
+      });
       const {
         rtlClasses
       } = useRtl();
+      let externalChange = true;
+      vue.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;
       };
       vue.onMounted(() => {
         if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
@@ -17603,7 +17645,8 @@
     };
   }
   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);
@@ -17621,25 +17664,22 @@
       }
     }
     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);
     }));
@@ -20576,12 +20616,13 @@
         }, [(props.showAdjacentMonths || !item.isAdjacent) && vue.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)
             }
           }
@@ -20607,6 +20648,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20642,6 +20684,10 @@
           onClick: () => onClick(i)
         };
         function onClick(i) {
+          if (model.value === i) {
+            emit('update:modelValue', model.value);
+            return;
+          }
           model.value = i;
         }
         return slots.month?.({
@@ -20650,9 +20696,7 @@
           props: btnProps
         }) ?? vue.createVNode(VBtn, vue.mergeProps({
           "key": "month"
-        }, btnProps, {
-          "onClick": () => onClick(i)
-        }), null);
+        }, btnProps), null);
       })])]));
       return {};
     }
@@ -20677,6 +20721,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20727,7 +20772,13 @@
           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,
@@ -20877,7 +20928,7 @@
         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 = vue.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 = vue.computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -20920,7 +20971,9 @@
         } else {
           year.value++;
           month.value = 0;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickPrev() {
         if (month.value > 0) {
@@ -20928,7 +20981,9 @@
         } else {
           year.value--;
           month.value = 11;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickDate() {
         viewMode.value = 'month';
@@ -20939,14 +20994,14 @@
       function onClickYear() {
         viewMode.value = viewMode.value === 'year' ? 'month' : 'year';
       }
-      vue.watch(month, () => {
+      function onUpdateMonth(value) {
         if (viewMode.value === 'months') onClickMonth();
-        emit('update:month', month.value);
-      });
-      vue.watch(year, () => {
+        emit('update:month', value);
+      }
+      function onUpdateYear(value) {
         if (viewMode.value === 'year') onClickYear();
-        emit('update:year', year.value);
-      });
+        emit('update:year', value);
+      }
       vue.watch(model, (val, oldVal) => {
         const before = adapter.date(wrapInArray(val)[0]);
         const after = adapter.date(wrapInArray(oldVal)[0]);
@@ -21002,14 +21057,14 @@
               "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' ? vue.createVNode(VDatePickerYears, vue.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) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
@@ -21018,9 +21073,9 @@
               "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)]
@@ -21038,7 +21093,9 @@
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     color: String,
+    flat: Boolean,
     static: Boolean,
+    tile: Boolean,
     variant: {
       type: String,
       default: 'default',
@@ -21068,12 +21125,17 @@
       provideDefaults({
         VExpansionPanel: {
           color: vue.toRef(props, 'color'),
-          readonly: vue.toRef(props, 'readonly'),
+          readonly: vue.toRef(props, 'readonly')
+        },
+        VExpansionPanelTitle: {
           static: vue.toRef(props, 'static')
         }
       });
       useRender(() => vue.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 {};
@@ -21357,7 +21419,7 @@
         if (!isFocused.value) focus();
       }
       function onClickPrepend(e) {
-        onControlClick(e);
+        inputRef.value?.click();
       }
       function onControlMousedown(e) {
         emit('mousedown:control', e);
@@ -23811,12 +23873,11 @@
           "scrollStrategy": "none",
           "_disableGlobalStack": true
         }, scopeId), {
-          default: () => [genOverlays(false, 'v-snackbar'), props.timer && vue.createVNode("div", {
+          default: () => [genOverlays(false, 'v-snackbar'), props.timer && !isHovering.value && vue.createVNode("div", {
             "key": "timer",
             "class": "v-snackbar__timer"
           }, [vue.createVNode(VProgressLinear, {
             "ref": timerRef,
-            "active": !isHovering.value,
             "color": typeof props.timer === 'string' ? props.timer : 'info',
             "max": props.timeout,
             "model-value": countdown.time.value
@@ -25666,7 +25727,7 @@
       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
@@ -25691,7 +25752,7 @@
       ...options
     });
   };
-  const version = "3.5.3";
+  const version = "3.5.5";
   createVuetify.version = version;
 
   exports.components = components;