vuetify 3.8.7 → 3.8.9

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.7
+* Vuetify v3.8.9
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -606,6 +606,13 @@
     }
     return cleanText;
   }
+  function camelizeProps(props) {
+    const out = {};
+    for (const prop in props) {
+      out[vue.camelize(prop)] = props[prop];
+    }
+    return out;
+  }
 
   // Utilities
   const block = ['top', 'bottom'];
@@ -3552,9 +3559,9 @@
         if (!normalisedSrc.value.src || state.value === 'idle') return null;
         const img = vue.createElementVNode("img", {
           "class": vue.normalizeClass(['v-img__img', containClasses.value]),
-          "style": vue.normalizeStyle({
+          "style": {
             objectPosition: props.position
-          }),
+          },
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.src,
           "srcset": normalisedSrc.value.srcset,
@@ -3581,9 +3588,9 @@
       }, {
         default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && vue.createElementVNode("img", {
           "class": vue.normalizeClass(['v-img__img', 'v-img__img--preload', containClasses.value]),
-          "style": vue.normalizeStyle({
+          "style": {
             objectPosition: props.position
-          }),
+          },
           "crossorigin": props.crossorigin,
           "src": normalisedSrc.value.lazySrc,
           "alt": props.alt,
@@ -3617,9 +3624,9 @@
         if (!props.gradient) return null;
         return vue.createElementVNode("div", {
           "class": "v-img__gradient",
-          "style": vue.normalizeStyle({
+          "style": {
             backgroundImage: `linear-gradient(${props.gradient})`
-          })
+          }
         }, null);
       };
       const isBooted = vue.shallowRef(false);
@@ -3830,9 +3837,9 @@
           }, {
             default: () => [vue.createElementVNode("div", {
               "class": "v-toolbar__content",
-              "style": vue.normalizeStyle({
+              "style": {
                 height: convertToUnit(contentHeight.value)
-              })
+              }
             }, [slots.prepend && vue.createElementVNode("div", {
               "class": "v-toolbar__prepend"
             }, [slots.prepend?.()]), hasTitle && vue.createVNode(VToolbarTitle, {
@@ -3853,9 +3860,9 @@
             default: () => [vue.createVNode(VExpandTransition, null, {
               default: () => [isExtended.value && vue.createElementVNode("div", {
                 "class": "v-toolbar__extension",
-                "style": vue.normalizeStyle({
+                "style": {
                   height: convertToUnit(extensionHeight.value)
-                })
+                }
               }, [extension])]
             })]
           })]
@@ -4928,9 +4935,9 @@
         "aria-valuenow": props.indeterminate ? undefined : normalizedValue.value
       }, {
         default: () => [vue.createElementVNode("svg", {
-          "style": vue.normalizeStyle({
+          "style": {
             transform: `rotate(calc(-90deg + ${Number(props.rotate)}deg))`
-          }),
+          },
           "xmlns": "http://www.w3.org/2000/svg",
           "viewBox": `0 0 ${diameter.value} ${diameter.value}`
         }, [vue.createElementVNode("circle", {
@@ -5151,7 +5158,7 @@
         default: () => [props.stream && vue.createElementVNode("div", {
           "key": "stream",
           "class": vue.normalizeClass(['v-progress-linear__stream', textColorClasses.value]),
-          "style": vue.normalizeStyle({
+          "style": {
             ...textColorStyles.value,
             [isReversed.value ? 'left' : 'right']: convertToUnit(-height.value),
             borderTop: `${convertToUnit(height.value / 2)} dotted`,
@@ -5159,7 +5166,7 @@
             top: `calc(50% - ${convertToUnit(height.value / 4)})`,
             width: convertToUnit(100 - normalizedBuffer.value, '%'),
             '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
-          })
+          }
         }, null), vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
           "style": vue.normalizeStyle([backgroundColorStyles.value, {
@@ -6467,7 +6474,7 @@
           backgroundColorClasses,
           backgroundColorStyles
         }), vue.withDirectives(vue.createElementVNode("div", {
-          "class": ['v-selection-control__input']
+          "class": vue.normalizeClass(['v-selection-control__input'])
         }, [slots.input?.({
           model,
           textColorClasses,
@@ -8100,6 +8107,7 @@
       const isClickable = vue.computed(() => !props.disabled && props.link !== false && (!!group || props.link || link.isClickable.value));
       const closeProps = vue.toRef(() => ({
         'aria-label': t(props.closeLabel),
+        disabled: props.disabled,
         onClick(e) {
           e.preventDefault();
           e.stopPropagation();
@@ -12109,10 +12117,12 @@
       const inputRef = vue.ref();
       const isActive = vue.computed(() => activeTypes.includes(props.type) || props.persistentPlaceholder || isFocused.value || props.active);
       function onFocus() {
-        if (inputRef.value !== document.activeElement) {
-          inputRef.value?.focus();
-        }
         if (!isFocused.value) focus();
+        vue.nextTick(() => {
+          if (inputRef.value !== document.activeElement) {
+            inputRef.value?.focus();
+          }
+        });
       }
       function onControlMousedown(e) {
         emit('mousedown:control', e);
@@ -12121,7 +12131,6 @@
         e.preventDefault();
       }
       function onControlClick(e) {
-        onFocus();
         emit('click:control', e);
       }
       function onClear(e, reset) {
@@ -12614,14 +12623,14 @@
         return props.renderless ? vue.createElementVNode(vue.Fragment, null, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__spacer",
-          "style": vue.normalizeStyle({
+          "style": {
             paddingTop: convertToUnit(paddingTop.value)
-          })
+          }
         }, null), children, vue.createElementVNode("div", {
           "class": "v-virtual-scroll__spacer",
-          "style": vue.normalizeStyle({
+          "style": {
             paddingBottom: convertToUnit(paddingBottom.value)
-          })
+          }
         }, null)]) : vue.createElementVNode("div", {
           "ref": containerRef,
           "class": vue.normalizeClass(['v-virtual-scroll', props.class]),
@@ -12631,10 +12640,10 @@
         }, [vue.createElementVNode("div", {
           "ref": markerRef,
           "class": "v-virtual-scroll__container",
-          "style": vue.normalizeStyle({
+          "style": {
             paddingTop: convertToUnit(paddingTop.value),
             paddingBottom: convertToUnit(paddingBottom.value)
-          })
+          }
         }, [children])]);
       });
       return {
@@ -13047,6 +13056,7 @@
                     index,
                     itemRef
                   } = _ref2;
+                  const camelizedProps = camelizeProps(item.props);
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
                     key: item.value,
@@ -13068,10 +13078,10 @@
                         "modelValue": isSelected,
                         "ripple": false,
                         "tabindex": "-1"
-                      }, null) : undefined, item.props.prependAvatar && vue.createVNode(VAvatar, {
-                        "image": item.props.prependAvatar
-                      }, null), item.props.prependIcon && vue.createVNode(VIcon, {
-                        "icon": item.props.prependIcon
+                      }, null) : undefined, camelizedProps.prependAvatar && vue.createVNode(VAvatar, {
+                        "image": camelizedProps.prependAvatar
+                      }, null), camelizedProps.prependIcon && vue.createVNode(VIcon, {
+                        "icon": camelizedProps.prependIcon
                       }, null)]);
                     }
                   });
@@ -15068,9 +15078,9 @@
       }, {
         default: () => [vue.createElementVNode("div", {
           "class": "v-window__container",
-          "style": vue.normalizeStyle({
+          "style": {
             height: transitionHeight.value
-          })
+          }
         }, [slots.default?.({
           group
         }), props.showArrows !== false && vue.createElementVNode("div", {
@@ -15165,10 +15175,10 @@
             } = _ref2;
             return vue.createElementVNode(vue.Fragment, null, [!props.hideDelimiters && vue.createElementVNode("div", {
               "class": "v-carousel__controls",
-              "style": vue.normalizeStyle({
+              "style": {
                 left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
                 right: props.verticalDelimiters === 'right' ? 0 : 'auto'
-              })
+              }
             }, [group.items.value.length > 0 && vue.createVNode(VDefaultsProvider, {
               "defaults": {
                 VBtn: {
@@ -15888,7 +15898,10 @@
       if (step.value <= 0) return value;
       const clamped = clamp(value, min.value, max.value);
       const offset = min.value % step.value;
-      const newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
+      let newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
+      if (clamped > newValue && newValue + step.value > max.value) {
+        newValue = max.value;
+      }
       return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
     }
     return {
@@ -16144,6 +16157,8 @@
       } = useRtl();
       if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider');
       const {
+        min,
+        max,
         thumbColor,
         step,
         disabled,
@@ -16184,16 +16199,20 @@
         if (!relevantKeys.includes(e.key)) return;
         e.preventDefault();
         const _step = step.value || 0.1;
-        const steps = (props.max - props.min) / _step;
+        const steps = (max.value - min.value) / _step;
         if ([left, right, down, up].includes(e.key)) {
           const increase = vertical.value ? [isRtl.value ? left : right, isReversed.value ? down : up] : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up];
           const direction = increase.includes(e.key) ? 1 : -1;
           const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
-          value = value + direction * _step * multipliers.value[multiplier];
+          if (direction === -1 && value === max.value && !multiplier && !Number.isInteger(steps)) {
+            value = value - steps % 1 * _step;
+          } else {
+            value = value + direction * _step * multipliers.value[multiplier];
+          }
         } else if (e.key === home) {
-          value = props.min;
+          value = min.value;
         } else if (e.key === end) {
-          value = props.max;
+          value = max.value;
         } else {
           const direction = e.key === pagedown ? 1 : -1;
           value = value - direction * _step * (steps > 100 ? steps / 10 : 10);
@@ -16218,17 +16237,17 @@
           "role": "slider",
           "tabindex": disabled.value ? -1 : 0,
           "aria-label": props.name,
-          "aria-valuemin": props.min,
-          "aria-valuemax": props.max,
+          "aria-valuemin": min.value,
+          "aria-valuemax": max.value,
           "aria-valuenow": props.modelValue,
           "aria-readonly": !!readonly.value,
           "aria-orientation": direction.value,
           "onKeydown": !readonly.value ? onKeydown : undefined
         }, [vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value]),
-          "style": vue.normalizeStyle({
+          "style": {
             ...textColorStyles.value
-          })
+          }
         }, null), vue.withDirectives(vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-thumb__ripple', textColorClasses.value]),
           "style": vue.normalizeStyle(textColorStyles.value)
@@ -16241,7 +16260,7 @@
           default: () => [vue.withDirectives(vue.createElementVNode("div", {
             "class": "v-slider-thumb__label-container"
           }, [vue.createElementVNode("div", {
-            "class": ['v-slider-thumb__label']
+            "class": vue.normalizeClass(['v-slider-thumb__label', textColorClasses.value])
           }, [vue.createElementVNode("div", null, [slots['thumb-label']?.({
             modelValue: props.modelValue
           }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[vue.vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
@@ -16326,9 +16345,9 @@
               'v-slider-track__tick--first': tick.value === min.value,
               'v-slider-track__tick--last': tick.value === max.value
             }]),
-            "style": vue.normalizeStyle({
+            "style": {
               [startDir.value]: directionValue
-            })
+            }
           }, [(tick.label || slots['tick-label']) && vue.createElementVNode("div", {
             "class": "v-slider-track__tick-label"
           }, [slots['tick-label']?.({
@@ -16348,16 +16367,16 @@
           "class": vue.normalizeClass(['v-slider-track__background', trackColorClasses.value, {
             'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
           }]),
-          "style": vue.normalizeStyle({
+          "style": {
             ...backgroundStyles.value,
             ...trackColorStyles.value
-          })
+          }
         }, null), vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-track__fill', trackFillColorClasses.value]),
-          "style": vue.normalizeStyle({
+          "style": {
             ...trackFillStyles.value,
             ...trackFillColorStyles.value
-          })
+          }
         }, null), showTicks.value && vue.createElementVNode("div", {
           "class": vue.normalizeClass(['v-slider-track__ticks', {
             'v-slider-track__ticks--always-show': showTicks.value === 'always'
@@ -16559,9 +16578,9 @@
       }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__dot"
       }, [vue.createElementVNode("div", {
-        "style": vue.normalizeStyle({
+        "style": {
           background: HSVtoCSS(props.color ?? nullColor)
-        })
+        }
       }, null)]), vue.createElementVNode("div", {
         "class": "v-color-picker-preview__sliders"
       }, [vue.createVNode(VSlider, {
@@ -16962,9 +16981,9 @@
           "class": "v-color-picker-swatches__color",
           "onClick": () => hsva && emit('update:color', hsva)
         }, [vue.createElementVNode("div", {
-          "style": vue.normalizeStyle({
+          "style": {
             background
-          })
+          }
         }, [props.color && deepEqual(props.color, hsva) ? vue.createVNode(VIcon, {
           "size": "x-small",
           "icon": "$success",
@@ -17510,7 +17529,7 @@
     const yearStart = new Date(year, 0, 1);
     const size = firstWeekSize(year);
     const d1w1 = size >= minWeekSize ? addDays(yearStart, size - 7) : addDays(yearStart, size);
-    return 1 + getDiff(date, d1w1, 'weeks');
+    return 1 + getDiff(endOfDay(date), startOfDay(d1w1), 'weeks');
   }
   function getDate(date) {
     return date.getDate();
@@ -17813,6 +17832,18 @@
       instance: createInstance(_options, locale)
     };
   }
+  function createDateRange(adapter, start, stop) {
+    const diff = adapter.getDiff(adapter.endOfDay(stop ?? start), adapter.startOfDay(start), 'days');
+    const datesInRange = [start];
+    for (let i = 1; i < diff; i++) {
+      const nextDate = adapter.addDays(start, i);
+      datesInRange.push(nextDate);
+    }
+    if (stop) {
+      datesInRange.push(adapter.endOfDay(stop));
+    }
+    return datesInRange;
+  }
   function createInstance(options, locale) {
     const instance = vue.reactive(typeof options.adapter === 'function'
     // eslint-disable-next-line new-cap
@@ -19912,7 +19943,9 @@
           "class": "v-data-table-footer"
         }, [slots.prepend?.(), vue.createElementVNode("div", {
           "class": "v-data-table-footer__items-per-page"
-        }, [vue.createElementVNode("span", null, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
+        }, [vue.createElementVNode("span", {
+          "aria-label": t(props.itemsPerPageText)
+        }, [t(props.itemsPerPageText)]), vue.createVNode(VSelect, {
           "items": itemsPerPageOptions.value,
           "modelValue": itemsPerPage.value,
           "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
@@ -19964,18 +19997,19 @@
     } = _ref;
     const Tag = props.tag ?? 'td';
     return vue.createVNode(Tag, {
+      "tabindex": "0",
       "class": vue.normalizeClass(['v-data-table__td', {
         'v-data-table-column--fixed': props.fixed,
         'v-data-table-column--last-fixed': props.lastFixed,
         'v-data-table-column--no-padding': props.noPadding,
         'v-data-table-column--nowrap': props.nowrap
       }, `v-data-table-column--align-${props.align}`]),
-      "style": vue.normalizeStyle({
+      "style": {
         height: convertToUnit(props.height),
         width: convertToUnit(props.width),
         maxWidth: convertToUnit(props.maxWidth),
         left: convertToUnit(props.fixedOffset || null)
-      })
+      }
     }, {
       default: () => [slots.default?.()]
     });
@@ -20308,6 +20342,11 @@
           top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
         };
       }
+      function handleEnterKeyPress(event, column) {
+        if (event.key === 'Enter' && !props.disableSort) {
+          toggleSort(column);
+        }
+      }
       function getSortIcon(column) {
         const item = sortBy.value.find(item => item.key === column.key);
         if (!item) return props.sortAscIcon;
@@ -20364,7 +20403,9 @@
           "nowrap": column.nowrap,
           "lastFixed": column.lastFixed,
           "noPadding": noPadding
-        }, headerProps), {
+        }, headerProps, {
+          "onKeydown": event => column.sortable && handleEnterKeyPress(event, column)
+        }), {
           default: () => {
             const columnSlotName = `header.${column.key}`;
             const columnSlotProps = {
@@ -20500,9 +20541,9 @@
       });
       return () => vue.createElementVNode("tr", {
         "class": "v-data-table-group-header-row",
-        "style": vue.normalizeStyle({
+        "style": {
           '--v-data-table-group-header-row-depth': props.item.depth
-        })
+        }
       }, [columns.value.map(column => {
         if (column.key === 'data-table-group') {
           const icon = isGroupOpen(props.item) ? '$expand' : '$next';
@@ -20850,9 +20891,9 @@
       }, {
         default: () => [slots.top?.(), slots.default ? vue.createElementVNode("div", {
           "class": "v-table__wrapper",
-          "style": vue.normalizeStyle({
+          "style": {
             height: convertToUnit(props.height)
-          })
+          }
         }, [vue.createElementVNode("table", null, [slots.default()])]) : slots.wrapper?.(), slots.bottom?.()]
       }));
       return {};
@@ -21287,19 +21328,19 @@
             "onScrollPassive": handleScroll,
             "onScrollend": handleScrollend,
             "class": "v-table__wrapper",
-            "style": vue.normalizeStyle({
+            "style": {
               height: convertToUnit(props.height)
-            })
+            }
           }, [vue.createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && vue.createElementVNode("thead", {
             "key": "thead"
           }, [vue.createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && vue.createElementVNode("tbody", {
             "key": "tbody"
           }, [vue.createElementVNode("tr", {
             "ref": markerRef,
-            "style": vue.normalizeStyle({
+            "style": {
               height: convertToUnit(paddingTop.value),
               border: 0
-            })
+            }
           }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
@@ -21330,10 +21371,10 @@
               }
             })
           }), slots['body.append']?.(slotProps.value), vue.createElementVNode("tr", {
-            "style": vue.normalizeStyle({
+            "style": {
               height: convertToUnit(paddingBottom.value),
               border: 0
-            })
+            }
           }, [vue.createElementVNode("td", {
             "colspan": columns.value.length,
             "style": {
@@ -21871,10 +21912,10 @@
       useRender(() => {
         // TODO: add slot support and scope defaults
         return vue.createElementVNode("div", {
-          "class": ['v-date-picker-controls'],
-          "style": vue.normalizeStyle({
+          "class": vue.normalizeClass(['v-date-picker-controls']),
+          "style": {
             '--v-date-picker-controls-height': convertToUnit(props.controlHeight)
-          })
+          }
         }, [vue.createVNode(VBtn, {
           "class": "v-date-picker-controls__month-btn",
           "data-testid": "month-btn",
@@ -22217,14 +22258,7 @@
           } else {
             rangeStop.value = adapter.endOfDay(_value);
           }
-          const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days');
-          const datesInRange = [rangeStart.value];
-          for (let i = 1; i < diff; i++) {
-            const nextDate = adapter.addDays(rangeStart.value, i);
-            datesInRange.push(nextDate);
-          }
-          datesInRange.push(rangeStop.value);
-          model.value = datesInRange;
+          model.value = createDateRange(adapter, rangeStart.value, rangeStop.value);
         } else {
           rangeStart.value = value;
           rangeStop.value = undefined;
@@ -22259,7 +22293,7 @@
         "key": "hide-week-days",
         "class": "v-date-picker-month__day"
       }, [vue.createTextVNode("\xA0")]), weekNumbers.value.map(week => vue.createElementVNode("div", {
-        "class": ['v-date-picker-month__day', 'v-date-picker-month__day--adjacent']
+        "class": vue.normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__day--adjacent'])
       }, [week]))]), vue.createVNode(MaybeTransition, {
         "name": transition.value
       }, {
@@ -22268,7 +22302,7 @@
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
         }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createElementVNode("div", {
-          "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
+          "class": vue.normalizeClass(['v-date-picker-month__day', 'v-date-picker-month__weekday'])
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
             props: {
@@ -22310,7 +22344,8 @@
     min: null,
     max: null,
     modelValue: Number,
-    year: Number
+    year: Number,
+    allowedMonths: [Array, Function]
   }, 'VDatePickerMonths');
   const VDatePickerMonths = genericComponent()({
     name: 'VDatePickerMonths',
@@ -22332,7 +22367,7 @@
         }
         return createRange(12).map(i => {
           const text = adapter.format(date, 'monthShort');
-          const isDisabled = !!(props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date) || props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))));
+          const isDisabled = !!(!isMonthAllowed(i) || props.min && adapter.isAfter(adapter.startOfMonth(adapter.date(props.min)), date) || props.max && adapter.isAfter(date, adapter.startOfMonth(adapter.date(props.max))));
           date = adapter.getNextMonth(date);
           return {
             isDisabled,
@@ -22344,11 +22379,20 @@
       vue.watchEffect(() => {
         model.value = model.value ?? adapter.getMonth(adapter.date());
       });
+      function isMonthAllowed(month) {
+        if (Array.isArray(props.allowedMonths) && props.allowedMonths.length) {
+          return props.allowedMonths.includes(month);
+        }
+        if (typeof props.allowedMonths === 'function') {
+          return props.allowedMonths(month);
+        }
+        return true;
+      }
       useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-months",
-        "style": vue.normalizeStyle({
+        "style": {
           height: convertToUnit(props.height)
-        })
+        }
       }, [vue.createElementVNode("div", {
         "class": "v-date-picker-months__content"
       }, [months.value.map((month, i) => {
@@ -22389,7 +22433,8 @@
     height: [String, Number],
     min: null,
     max: null,
-    modelValue: Number
+    modelValue: Number,
+    allowedYears: [Array, Function]
   }, 'VDatePickerYears');
   const VDatePickerYears = genericComponent()({
     name: 'VDatePickerYears',
@@ -22421,7 +22466,8 @@
           date = adapter.setYear(date, adapter.getYear(date) + 1);
           return {
             text,
-            value: i
+            value: i,
+            isDisabled: !isYearAllowed(i)
           };
         });
       });
@@ -22435,11 +22481,20 @@
           block: 'center'
         });
       });
+      function isYearAllowed(year) {
+        if (Array.isArray(props.allowedYears) && props.allowedYears.length) {
+          return props.allowedYears.includes(year);
+        }
+        if (typeof props.allowedYears === 'function') {
+          return props.allowedYears(year);
+        }
+        return true;
+      }
       useRender(() => vue.createElementVNode("div", {
         "class": "v-date-picker-years",
-        "style": vue.normalizeStyle({
+        "style": {
           height: convertToUnit(props.height)
-        })
+        }
       }, [vue.createElementVNode("div", {
         "class": "v-date-picker-years__content"
       }, [years.value.map((year, i) => {
@@ -22449,6 +22504,7 @@
           color: model.value === year.value ? props.color : undefined,
           rounded: true,
           text: year.text,
+          disabled: year.isDisabled,
           variant: model.value === year.value ? 'flat' : 'text',
           onClick: () => {
             if (model.value === year.value) {
@@ -22598,6 +22654,41 @@
         }
         return targets;
       });
+      function isAllowedInRange(start, end) {
+        const allowedDates = props.allowedDates;
+        if (typeof allowedDates !== 'function') return true;
+        const days = adapter.getDiff(end, start, 'days');
+        for (let i = 0; i < days; i++) {
+          if (allowedDates(adapter.addDays(start, i))) return true;
+        }
+        return false;
+      }
+      function allowedYears(year) {
+        if (typeof props.allowedDates === 'function') {
+          const startOfYear = adapter.parseISO(`${year}-01-01`);
+          return isAllowedInRange(startOfYear, adapter.endOfYear(startOfYear));
+        }
+        if (Array.isArray(props.allowedDates) && props.allowedDates.length) {
+          for (const date of props.allowedDates) {
+            if (adapter.getYear(adapter.date(date)) === year) return true;
+          }
+          return false;
+        }
+        return true;
+      }
+      function allowedMonths(month) {
+        if (typeof props.allowedDates === 'function') {
+          const startOfMonth = adapter.parseISO(`${year.value}-${month + 1}-01`);
+          return isAllowedInRange(startOfMonth, adapter.endOfMonth(startOfMonth));
+        }
+        if (Array.isArray(props.allowedDates) && props.allowedDates.length) {
+          for (const date of props.allowedDates) {
+            if (adapter.getYear(adapter.date(date)) === year.value && adapter.getMonth(adapter.date(date)) === month) return true;
+          }
+          return false;
+        }
+        return true;
+      }
 
       // function onClickAppend () {
       //   inputMode.value = inputMode.value === 'calendar' ? 'keyboard' : 'calendar'
@@ -22713,14 +22804,16 @@
               "onUpdate:modelValue": [$event => month.value = $event, onUpdateMonth],
               "min": minDate.value,
               "max": maxDate.value,
-              "year": year.value
+              "year": year.value,
+              "allowedMonths": allowedMonths
             }), null) : viewMode.value === 'year' ? vue.createVNode(VDatePickerYears, vue.mergeProps({
               "key": "date-picker-years"
             }, datePickerYearsProps, {
               "modelValue": year.value,
               "onUpdate:modelValue": [$event => year.value = $event, onUpdateYear],
               "min": minDate.value,
-              "max": maxDate.value
+              "max": maxDate.value,
+              "allowedYears": allowedYears
             }), null) : vue.createVNode(VDatePickerMonth, vue.mergeProps({
               "key": "date-picker-month"
             }, datePickerMonthProps, {
@@ -22845,9 +22938,9 @@
         }, [slots.title?.() ?? props.title]), hasText && vue.createElementVNode("div", {
           "key": "text",
           "class": "v-empty-state__text",
-          "style": vue.normalizeStyle({
+          "style": {
             maxWidth: convertToUnit(props.textWidth)
-          })
+          }
         }, [slots.text?.() ?? props.text]), slots.default && vue.createElementVNode("div", {
           "key": "content",
           "class": "v-empty-state__content"
@@ -23252,6 +23345,56 @@
 
   // Types
 
+  function useFileDrop() {
+    function hasFilesOrFolders(e) {
+      const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+      return entries.length > 0 || [...(e.dataTransfer?.files ?? [])].length > 0;
+    }
+    async function handleDrop(e) {
+      const result = [];
+      const entries = [...(e.dataTransfer?.items ?? [])].filter(x => x.kind === 'file').map(x => x.webkitGetAsEntry()).filter(Boolean);
+      if (entries.length) {
+        for (const entry of entries) {
+          const files = await traverseFileTree(entry, appendIfDirectory('.', entry));
+          result.push(...files.map(x => x.file));
+        }
+      } else {
+        result.push(...[...(e.dataTransfer?.files ?? [])]);
+      }
+      return result;
+    }
+    return {
+      handleDrop,
+      hasFilesOrFolders
+    };
+  }
+  function traverseFileTree(item) {
+    let path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    return new Promise((resolve, reject) => {
+      if (item.isFile) {
+        const fileEntry = item;
+        fileEntry.file(file => resolve([{
+          file,
+          path
+        }]), reject);
+      } else if (item.isDirectory) {
+        const directoryReader = item.createReader();
+        directoryReader.readEntries(async entries => {
+          const files = [];
+          for (const entry of entries) {
+            files.push(...(await traverseFileTree(entry, appendIfDirectory(path, entry))));
+          }
+          resolve(files);
+        });
+      }
+    });
+  }
+  function appendIfDirectory(path, item) {
+    return item.isDirectory ? `${path}/${item.name}` : path;
+  }
+
+  // Types
+
   const makeVFileInputProps = propsFactory({
     chips: Boolean,
     counter: Boolean,
@@ -23336,6 +23479,10 @@
       const isActive = vue.toRef(() => isFocused.value || props.active);
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       const isDragging = vue.shallowRef(false);
+      const {
+        handleDrop,
+        hasFilesOrFolders
+      } = useFileDrop();
       function onFocus() {
         if (inputRef.value !== document.activeElement) {
           inputRef.value?.focus();
@@ -23369,13 +23516,13 @@
         e.preventDefault();
         isDragging.value = false;
       }
-      function onDrop(e) {
+      async function onDrop(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         isDragging.value = false;
-        if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+        if (!inputRef.value || !hasFilesOrFolders(e)) return;
         const dataTransfer = new DataTransfer();
-        for (const file of e.dataTransfer.files) {
+        for (const file of await handleDrop(e)) {
           dataTransfer.items.add(file);
         }
         inputRef.value.files = dataTransfer.files;
@@ -23712,9 +23859,9 @@
       });
       useRender(() => vue.createElementVNode("div", {
         "class": "v-infinite-scroll-intersect",
-        "style": vue.normalizeStyle({
+        "style": {
           '--v-infinite-margin-size': props.rootMargin
-        }),
+        },
         "ref": intersectionRef
       }, [vue.createTextVNode("\xA0")]));
       return {};
@@ -24806,6 +24953,7 @@
       ...makeVNumberInputProps()
     },
     emits: {
+      'update:focused': val => true,
       'update:modelValue': val => true
     },
     setup(props, _ref) {
@@ -24821,11 +24969,7 @@
       });
       const form = useForm(props);
       const controlsDisabled = vue.computed(() => form.isDisabled.value || form.isReadonly.value);
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
+      const isFocused = vue.shallowRef(props.focused);
       function correctPrecision(val) {
         let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.precision;
         const fixed = precision == null ? String(val) : val.toFixed(precision);
@@ -24870,22 +25014,18 @@
       const controlNodeDefaultHeight = vue.toRef(() => controlVariant.value === 'stacked' ? 'auto' : '100%');
       const incrementSlotProps = {
         props: {
-          style: {
-            touchAction: 'none'
-          },
           onClick: onControlClick,
           onPointerup: onControlMouseup,
-          onPointerdown: onUpControlMousedown
+          onPointerdown: onUpControlMousedown,
+          onPointercancel: onControlPointerCancel
         }
       };
       const decrementSlotProps = {
         props: {
-          style: {
-            touchAction: 'none'
-          },
           onClick: onControlClick,
           onPointerup: onControlMouseup,
-          onPointerdown: onDownControlMousedown
+          onPointerdown: onDownControlMousedown,
+          onPointercancel: onControlPointerCancel
         }
       };
       vue.watch(() => props.precision, () => formatInputValue());
@@ -24982,6 +25122,11 @@
         e.stopPropagation();
         holdStart('down');
       }
+      function onControlPointerCancel(e) {
+        const el = e.currentTarget;
+        el?.releasePointerCapture(e.pointerId);
+        holdStop();
+      }
       function clampModel() {
         if (controlsDisabled.value) return;
         if (!vTextFieldRef.value) return;
@@ -25009,11 +25154,9 @@
         inputText.value = model.value.toString();
       }
       function onFocus() {
-        focus();
         trimDecimalZeros();
       }
       function onBlur() {
-        blur();
         clampModel();
       }
       useRender(() => {
@@ -25033,8 +25176,8 @@
             "onClick": onControlClick,
             "onPointerdown": onUpControlMousedown,
             "onPointerup": onControlMouseup,
+            "onPointercancel": onControlPointerCancel,
             "size": controlNodeSize.value,
-            "style": "touch-action: none",
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "increment-defaults",
@@ -25063,8 +25206,8 @@
             "onClick": onControlClick,
             "onPointerdown": onDownControlMousedown,
             "onPointerup": onControlMouseup,
+            "onPointercancel": onControlPointerCancel,
             "size": controlNodeSize.value,
-            "style": "touch-action: none",
             "tabindex": "-1"
           }, null) : vue.createVNode(VDefaultsProvider, {
             "key": "decrement-defaults",
@@ -25106,9 +25249,12 @@
         }, null)]) : props.reverse && controlVariant.value !== 'hidden' ? vue.createElementVNode(vue.Fragment, null, [controlNode(), dividerNode()]) : undefined;
         const hasPrependInner = slots['prepend-inner'] || prependInnerControl;
         return vue.createVNode(VTextField, vue.mergeProps({
-          "ref": vTextFieldRef,
+          "ref": vTextFieldRef
+        }, textFieldProps, {
           "modelValue": inputText.value,
           "onUpdate:modelValue": $event => inputText.value = $event,
+          "focused": isFocused.value,
+          "onUpdate:focused": $event => isFocused.value = $event,
           "validationValue": model.value,
           "onBeforeinput": onBeforeinput,
           "onFocus": onFocus,
@@ -25121,8 +25267,7 @@
             'v-number-input--reverse': props.reverse,
             'v-number-input--split': controlVariant.value === 'split',
             'v-number-input--stacked': controlVariant.value === 'stacked'
-          }, props.class]
-        }, textFieldProps, {
+          }, props.class],
           "style": props.style,
           "inputmode": "decimal"
         }), {
@@ -25257,7 +25402,7 @@
       function onPaste(index, e) {
         e.preventDefault();
         e.stopPropagation();
-        const clipboardText = e?.clipboardData?.getData('Text').slice(0, length.value) ?? '';
+        const clipboardText = e?.clipboardData?.getData('Text').trim().slice(0, length.value) ?? '';
         if (isValidNumber(clipboardText)) return;
         model.value = clipboardText.split('');
         inputRef.value?.[index].blur();
@@ -25289,7 +25434,10 @@
         scoped: true
       });
       vue.watch(model, val => {
-        if (val.length === length.value) emit('finish', val.join(''));
+        if (val.length === length.value) {
+          focusIndex.value = length.value - 1;
+          emit('finish', val.join(''));
+        }
       }, {
         deep: true
       });
@@ -25324,7 +25472,7 @@
               "aria-label": t(props.label, i + 1),
               "autofocus": i === 0 && props.autofocus,
               "autocomplete": "one-time-code",
-              "class": ['v-otp-input__field'],
+              "class": vue.normalizeClass(['v-otp-input__field']),
               "disabled": props.disabled,
               "inputmode": props.type === 'number' ? 'numeric' : 'text',
               "min": props.type === 'number' ? 0 : undefined,
@@ -29180,13 +29328,9 @@
       let {
         slots
       } = _ref;
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
       const model = useProxiedModel(props, 'modelValue');
       const menu = vue.shallowRef(false);
+      const isFocused = vue.shallowRef(props.focused);
       const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
       const display = vue.computed(() => model.value || null);
       function onKeydown(e) {
@@ -29217,10 +29361,9 @@
           "modelValue": display.value,
           "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
-          "onFocus": focus,
-          "onBlur": blur,
           "onClick:control": isInteractive.value ? onClick : undefined,
           "onClick:prependInner": isInteractive.value ? onClick : undefined,
+          "onUpdate:focused": event => isFocused.value = event,
           "onClick:appendInner": isInteractive.value ? onClick : undefined,
           "onUpdate:modelValue": val => {
             model.value = val;
@@ -29424,6 +29567,7 @@
     emits: {
       save: value => true,
       cancel: () => true,
+      'update:focused': val => true,
       'update:modelValue': val => true,
       'update:menu': val => true
     },
@@ -29446,15 +29590,11 @@
       const {
         mobile
       } = useDisplay(props);
-      const {
-        isFocused,
-        focus,
-        blur
-      } = useFocus(props);
       const emptyModelValue = () => props.multiple ? [] : null;
       const model = useProxiedModel(props, 'modelValue', emptyModelValue(), val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
       const menu = useProxiedModel(props, 'menu');
       const isEditingInput = vue.shallowRef(false);
+      const isFocused = vue.shallowRef(props.focused);
       const vTextFieldRef = vue.ref();
       const disabledActions = vue.ref(['save']);
       function format(date) {
@@ -29530,7 +29670,6 @@
         if (props.updateOn.includes('blur')) {
           onUserInput(e.target);
         }
-        blur();
 
         // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
         if (mobile.value && isEditingInput.value && !isFocused.value) {
@@ -29552,18 +29691,14 @@
           const parts = value.trim().split(/\D+-\D+|[^\d\-/.]+/);
           if (parts.every(isValid)) {
             if (props.multiple === 'range') {
-              model.value = getRange(parts);
+              const [start, stop] = parts.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
+              model.value = createDateRange(adapter, start, stop);
             } else {
               model.value = parts.map(parseDate);
             }
           }
         }
       }
-      function getRange(inputDates) {
-        const [start, stop] = inputDates.map(parseDate).toSorted((a, b) => adapter.isAfter(a, b) ? 1 : -1);
-        const diff = adapter.getDiff(stop ?? start, start, 'days');
-        return [start, ...createRange(diff, 1).map(i => adapter.addDays(start, i))];
-      }
       useRender(() => {
         const confirmEditProps = VConfirmEdit.filterProps(props);
         const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
@@ -29579,12 +29714,12 @@
           "readonly": isReadonly.value,
           "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
-          "onFocus": focus,
           "onBlur": onBlur,
           "validationValue": model.value,
           "onClick:control": isInteractive.value ? onClick : undefined,
           "onClick:prepend": isInteractive.value ? onClick : undefined,
-          "onUpdate:modelValue": onUpdateDisplayModel
+          "onUpdate:modelValue": onUpdateDisplayModel,
+          "onUpdate:focused": event => isFocused.value = event
         }), {
           ...slots,
           default: () => vue.createElementVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
@@ -29799,6 +29934,9 @@
       const isDragging = vue.shallowRef(false);
       const vSheetRef = vue.ref(null);
       const inputRef = vue.ref(null);
+      const {
+        handleDrop
+      } = useFileDrop();
       function onDragover(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
@@ -29808,13 +29946,13 @@
         e.preventDefault();
         isDragging.value = false;
       }
-      function onDrop(e) {
+      async function onDrop(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         isDragging.value = false;
-        if (!e.dataTransfer?.files?.length || !inputRef.value) return;
+        if (!inputRef.value) return;
         const dataTransfer = new DataTransfer();
-        for (const file of e.dataTransfer.files) {
+        for (const file of await handleDrop(e)) {
           dataTransfer.items.add(file);
         }
         inputRef.value.files = dataTransfer.files;
@@ -30440,7 +30578,7 @@
       });
       useRender(() => {
         return vue.createElementVNode("div", {
-          "class": ['v-pull-to-refresh'],
+          "class": vue.normalizeClass(['v-pull-to-refresh']),
           "onTouchstart": onTouchstart,
           "onTouchmove": onTouchmove,
           "onTouchend": onTouchend,
@@ -30453,16 +30591,16 @@
           "class": vue.normalizeClass(['v-pull-to-refresh__pull-down', {
             'v-pull-to-refresh__pull-down--touching': touching.value
           }]),
-          "style": vue.normalizeStyle({
+          "style": {
             top: convertToUnit(-1 * props.pullDownThreshold + topOffset.value),
             height: convertToUnit(props.pullDownThreshold)
-          })
+          }
         }, [slots.pullDownPanel ? slots.pullDownPanel({
           canRefresh: canRefresh.value,
           goingUp: goingUp.value,
           refreshing: refreshing.value
         }) : vue.createElementVNode("div", {
-          "class": ['v-pull-to-refresh__pull-down-default']
+          "class": vue.normalizeClass(['v-pull-to-refresh__pull-down-default'])
         }, [refreshing.value ? vue.createVNode(VProgressCircular, {
           "indeterminate": true,
           "active": false
@@ -30472,9 +30610,9 @@
           "class": vue.normalizeClass(['v-pull-to-refresh__scroll-container', {
             'v-pull-to-refresh__scroll-container--touching': touching.value
           }]),
-          "style": vue.normalizeStyle({
+          "style": {
             top: convertToUnit(topOffset.value)
-          })
+          }
         }, [slots.default?.()])]);
       });
     }
@@ -32015,7 +32153,7 @@
       };
     });
   }
-  const version$1 = "3.8.7";
+  const version$1 = "3.8.9";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -32313,7 +32451,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.7";
+  const version = "3.8.9";
 
   /* eslint-disable local-rules/sort-imports */