vuetify 3.5.4 → 3.5.6

package/dist/vuetify.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.4
+* Vuetify v3.5.6
 * 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 */
@@ -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,11 @@
         }
       }
       function select(item) {
+        let add = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         if (props.multiple) {
           const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-          if (index === -1) {
+          add = index === -1;
+          if (add) {
             model.value = [...model.value, item];
           } else {
             const value = [...model.value];
@@ -11824,7 +11855,7 @@
             model.value = value;
           }
         } else {
-          model.value = [item];
+          model.value = add ? [item] : [];
           menu.value = false;
         }
       }
@@ -11976,7 +12007,7 @@
             function onChipClose(e) {
               e.stopPropagation();
               e.preventDefault();
-              select(item);
+              select(item, false);
             }
             const slotProps = {
               'onClick:close': onChipClose,
@@ -12086,7 +12117,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) {
@@ -12365,7 +12396,8 @@
         if (item.props.disabled) return;
         if (props.multiple) {
           const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value));
-          if (index === -1) {
+          add = index === -1;
+          if (add) {
             model.value = [...model.value, item];
           } else {
             const value = [...model.value];
@@ -12507,7 +12539,9 @@
                     item,
                     index,
                     props: itemProps
-                  }) ?? vue.createVNode(VListItem, itemProps, {
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
                     prepend: _ref4 => {
                       let {
                         isSelected
@@ -16297,7 +16331,9 @@
                     item,
                     index,
                     props: itemProps
-                  }) ?? vue.createVNode(VListItem, itemProps, {
+                  }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
+                    "role": "option"
+                  }), {
                     prepend: _ref4 => {
                       let {
                         isSelected
@@ -17615,7 +17651,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);
@@ -17633,25 +17670,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(clamp(progress, 0, 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);
     }));
@@ -20588,12 +20622,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)
             }
           }
@@ -20619,6 +20654,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20654,6 +20690,10 @@
           onClick: () => onClick(i)
         };
         function onClick(i) {
+          if (model.value === i) {
+            emit('update:modelValue', model.value);
+            return;
+          }
           model.value = i;
         }
         return slots.month?.({
@@ -20662,9 +20702,7 @@
           props: btnProps
         }) ?? vue.createVNode(VBtn, vue.mergeProps({
           "key": "month"
-        }, btnProps, {
-          "onClick": () => onClick(i)
-        }), null);
+        }, btnProps), null);
       })])]));
       return {};
     }
@@ -20689,6 +20727,7 @@
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const adapter = useDate();
@@ -20739,7 +20778,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,
@@ -20932,7 +20977,9 @@
         } else {
           year.value++;
           month.value = 0;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickPrev() {
         if (month.value > 0) {
@@ -20940,7 +20987,9 @@
         } else {
           year.value--;
           month.value = 11;
+          onUpdateYear(year.value);
         }
+        onUpdateMonth(month.value);
       }
       function onClickDate() {
         viewMode.value = 'month';
@@ -20951,14 +21000,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]);
@@ -21014,14 +21063,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({
@@ -21030,9 +21079,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)]
@@ -21050,7 +21099,10 @@
   const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
   const makeVExpansionPanelsProps = propsFactory({
     color: String,
+    flat: Boolean,
+    focusable: Boolean,
     static: Boolean,
+    tile: Boolean,
     variant: {
       type: String,
       default: 'default',
@@ -21080,12 +21132,18 @@
       provideDefaults({
         VExpansionPanel: {
           color: vue.toRef(props, 'color'),
-          readonly: vue.toRef(props, 'readonly'),
+          readonly: vue.toRef(props, 'readonly')
+        },
+        VExpansionPanelTitle: {
+          focusable: vue.toRef(props, 'focusable'),
           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 {};
@@ -21136,6 +21194,7 @@
       default: '$collapse'
     },
     hideActions: Boolean,
+    focusable: Boolean,
     static: Boolean,
     ripple: {
       type: [Boolean, Object],
@@ -21170,6 +21229,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],
@@ -21369,7 +21429,7 @@
         if (!isFocused.value) focus();
       }
       function onClickPrepend(e) {
-        onControlClick(e);
+        inputRef.value?.click();
       }
       function onControlMousedown(e) {
         emit('mousedown:control', e);
@@ -25342,6 +25402,7 @@
     VDataIterator: VDataIterator,
     VDataTable: VDataTable,
     VDataTableFooter: VDataTableFooter,
+    VDataTableHeaders: VDataTableHeaders,
     VDataTableRow: VDataTableRow,
     VDataTableRows: VDataTableRows,
     VDataTableServer: VDataTableServer,
@@ -25677,7 +25738,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.4";
+  const version$1 = "3.5.6";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -25702,7 +25763,7 @@
       ...options
     });
   };
-  const version = "3.5.4";
+  const version = "3.5.6";
   createVuetify.version = version;
 
   exports.components = components;