vuetify 3.3.16 → 3.3.18

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.3.16
+* Vuetify v3.3.18
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, withModifiers } from 'vue';
+import { Fragment, reactive, computed, watchEffect, toRefs, capitalize, warn, ref, unref, provide, shallowRef, inject as inject$1, defineComponent as defineComponent$1, camelize, h, getCurrentInstance as getCurrentInstance$1, onBeforeUnmount, watch, readonly, onDeactivated, onActivated, onMounted, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, isRef, toRef, Text, resolveDynamicComponent, Teleport, cloneVNode, createTextVNode, onBeforeUpdate, vModelText, withModifiers, toDisplayString } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -123,7 +123,8 @@ function getObjectValueByPath(obj, path, fallback) {
   return getNestedValue(obj, path.split('.'), fallback);
 }
 function getPropertyFromItem(item, property, fallback) {
-  if (property == null) return item === undefined ? fallback : item;
+  if (property === true) return item === undefined ? fallback : item;
+  if (property == null || typeof property === 'boolean') return fallback;
   if (item !== Object(item)) {
     if (typeof property !== 'function') return fallback;
     const value = property(item, fallback);
@@ -1113,6 +1114,17 @@ function getContrast(first, second) {
 function getForeground(color) {
   const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color)));
   const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color)));
+
+  // TODO: warn about poor color selections
+  // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
+  // const minContrast = Math.max(blackContrast, whiteContrast)
+  // if (minContrast < 60) {
+  //   consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`)
+  // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) {
+  //   consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`)
+  // }
+
+  // Prefer white text if both have an acceptable contrast ratio
   return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000';
 }
 
@@ -1710,7 +1722,7 @@ function createLayout(props) {
     'v-layout--full-height': props.fullHeight
   }]);
   const layoutStyles = computed(() => ({
-    zIndex: rootZIndex.value,
+    zIndex: parentLayout ? rootZIndex.value : undefined,
     position: parentLayout ? 'relative' : undefined,
     overflow: parentLayout ? 'hidden' : undefined
   }));
@@ -2231,17 +2243,6 @@ function createTheme(options) {
         if (/^on-[a-z]/.test(color) || theme.colors[`on-${color}`]) continue;
         const onColor = `on-${color}`;
         const colorVal = parseColor(theme.colors[color]);
-
-        // TODO: warn about poor color selections
-        // const contrastAsText = Math.abs(APCAcontrast(colorVal, colorToInt(theme.colors.background)))
-        // const minContrast = Math.max(blackContrast, whiteContrast)
-        // if (minContrast < 60) {
-        //   consoleInfo(`${key} theme color ${color} has poor contrast (${minContrast.toFixed()}%)`)
-        // } else if (contrastAsText < 60 && !['background', 'surface'].includes(color)) {
-        //   consoleInfo(`${key} theme color ${color} has poor contrast as text (${contrastAsText.toFixed()}%)`)
-        // }
-
-        // Prefer white text if both have an acceptable contrast ratio
         theme.colors[onColor] = getForeground(colorVal);
       }
     }
@@ -2401,7 +2402,6 @@ const VApp = genericComponent()({
     const theme = provideTheme(props);
     const {
       layoutClasses,
-      layoutStyles,
       getLayoutItem,
       items,
       layoutRef
@@ -2412,7 +2412,7 @@ const VApp = genericComponent()({
     useRender(() => createVNode("div", {
       "ref": layoutRef,
       "class": ['v-application', theme.themeClasses.value, layoutClasses.value, rtlClasses.value, props.class],
-      "style": [layoutStyles.value, props.style]
+      "style": [props.style]
     }, [createVNode("div", {
       "class": "v-application__wrap"
     }, [slots.default?.()])]));
@@ -3274,9 +3274,12 @@ function useColor(colors) {
       if (isCssColor(colors.value.background)) {
         styles.backgroundColor = colors.value.background;
         if (!colors.value.text) {
-          const textColor = getForeground(styles.backgroundColor);
-          styles.color = textColor;
-          styles.caretColor = textColor;
+          const backgroundColor = parseColor(colors.value.background);
+          if (backgroundColor.a == null || backgroundColor.a === 1) {
+            const textColor = getForeground(backgroundColor);
+            styles.color = textColor;
+            styles.caretColor = textColor;
+          }
         }
       } else {
         classes.push(`bg-${colors.value.background}`);
@@ -7885,7 +7888,8 @@ const VDivider = genericComponent()({
 // Types
 
 const makeVListChildrenProps = propsFactory({
-  items: Array
+  items: Array,
+  returnObject: Boolean
 }, 'VListChildren');
 const VListChildren = genericComponent()({
   name: 'VListChildren',
@@ -7943,14 +7947,20 @@ const VListChildren = genericComponent()({
               ...itemProps,
               ...activatorProps
             }
-          }) : createVNode(VListItem, mergeProps(itemProps, activatorProps), slotsWithItem);
+          }) : createVNode(VListItem, mergeProps({
+            "title": itemProps.title,
+            "value": props.returnObject ? item : itemProps.value
+          }, activatorProps), slotsWithItem);
         },
         default: () => createVNode(VListChildren, {
           "items": children
         }, slots)
       }) : slots.item ? slots.item({
         props: itemProps
-      }) : createVNode(VListItem, itemProps, slotsWithItem);
+      }) : createVNode(VListItem, {
+        "title": itemProps.title,
+        "value": props.returnObject ? item : itemProps.value
+      }, slotsWithItem);
     });
   }
 });
@@ -8234,7 +8244,8 @@ const VList = genericComponent()({
         "onKeydown": onKeydown
       }, {
         default: () => [createVNode(VListChildren, {
-          "items": items.value
+          "items": items.value,
+          "returnObject": props.returnObject
         }, slots)]
       });
     });
@@ -10351,7 +10362,7 @@ const activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week',
 const makeVTextFieldProps = propsFactory({
   autofocus: Boolean,
   counter: [Boolean, Number, String],
-  counterValue: Function,
+  counterValue: [Number, Function],
   prefix: String,
   placeholder: String,
   persistentPlaceholder: Boolean,
@@ -10392,7 +10403,7 @@ const VTextField = genericComponent()({
       blur
     } = useFocus(props);
     const counterValue = computed(() => {
-      return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value ?? '').toString().length;
+      return typeof props.counterValue === 'function' ? props.counterValue(model.value) : typeof props.counterValue === 'number' ? props.counterValue : (model.value ?? '').toString().length;
     });
     const max = computed(() => {
       if (attrs.maxlength) return attrs.maxlength;
@@ -11046,6 +11057,7 @@ const VSelect = genericComponent()({
         "focused": isFocused.value,
         "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
+        "counterValue": model.value.length,
         "dirty": isDirty,
         "class": ['v-select', {
           'v-select--active-menu': menu.value,
@@ -11152,7 +11164,8 @@ const VSelect = genericComponent()({
             "key": "chip",
             "closable": props.closableChips,
             "size": "small",
-            "text": item.title
+            "text": item.title,
+            "disabled": item.props.disabled
           }, slotProps), null) : createVNode(VDefaultsProvider, {
             "key": "chip-defaults",
             "defaults": {
@@ -11449,7 +11462,7 @@ const VAutocomplete = genericComponent()({
         }
         const originalSelectionIndex = selectionIndex.value;
         const selectedItem = model.value[selectionIndex.value];
-        if (selectedItem) select(selectedItem);
+        if (selectedItem && !selectedItem.props.disabled) select(selectedItem);
         selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (e.key === 'ArrowLeft') {
@@ -11569,6 +11582,7 @@ const VAutocomplete = genericComponent()({
         "focused": isFocused.value,
         "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
+        "counterValue": model.value.length,
         "dirty": isDirty,
         "onInput": onInput,
         "onChange": onChange,
@@ -11679,7 +11693,8 @@ const VAutocomplete = genericComponent()({
             "key": "chip",
             "closable": props.closableChips,
             "size": "small",
-            "text": item.title
+            "text": item.title,
+            "disabled": item.props.disabled
           }, slotProps), null) : createVNode(VDefaultsProvider, {
             "key": "chip-defaults",
             "defaults": {
@@ -14140,11 +14155,11 @@ const VSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "id": slotProps.id.value,
           "class": "v-slider__label",
           "text": props.label
-        }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
+        }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
         default: _ref4 => {
           let {
             id,
@@ -15018,7 +15033,7 @@ const VCombobox = genericComponent()({
         }
         const originalSelectionIndex = selectionIndex.value;
         const selectedItem = model.value[selectionIndex.value];
-        if (selectedItem) select(selectedItem);
+        if (selectedItem && !selectedItem.props.disabled) select(selectedItem);
         selectionIndex.value = originalSelectionIndex >= length - 1 ? length - 2 : originalSelectionIndex;
       }
       if (e.key === 'ArrowLeft') {
@@ -15126,6 +15141,7 @@ const VCombobox = genericComponent()({
         "focused": isFocused.value,
         "onUpdate:focused": $event => isFocused.value = $event,
         "validationValue": model.externalValue,
+        "counterValue": props.multiple ? model.value.length : search.value.length,
         "dirty": isDirty,
         "class": ['v-combobox', {
           'v-combobox--active-menu': menu.value,
@@ -15235,7 +15251,8 @@ const VCombobox = genericComponent()({
             "key": "chip",
             "closable": props.closableChips,
             "size": "small",
-            "text": item.title
+            "text": item.title,
+            "disabled": item.props.disabled
           }, slotProps), null) : createVNode(VDefaultsProvider, {
             "key": "chip-defaults",
             "defaults": {
@@ -17725,10 +17742,10 @@ const VRangeSlider = genericComponent()({
         "focused": isFocused.value
       }), {
         ...slots,
-        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? props.label ? createVNode(VLabel, {
+        prepend: hasPrepend ? slotProps => createVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
           "class": "v-slider__label",
           "text": props.label
-        }, null) : undefined, slots.prepend?.(slotProps)]) : undefined,
+        }, null) : undefined), slots.prepend?.(slotProps)]) : undefined,
         default: _ref4 => {
           let {
             id,
@@ -18813,8 +18830,8 @@ const VTab = genericComponent()({
 function parseItems(items) {
   if (!items) return [];
   return items.map(item => {
-    if (typeof item === 'string') return {
-      title: item,
+    if (!isObject(item)) return {
+      text: item,
       value: item
     };
     return item;
@@ -18892,7 +18909,7 @@ const VTabs = genericComponent()({
         "symbol": VTabsSymbol
       }), {
         default: () => [slots.default ? slots.default() : parsedItems.value.map(item => createVNode(VTab, mergeProps(item, {
-          "key": item.title
+          "key": item.text
         }), null))]
       });
     });
@@ -19585,7 +19602,6 @@ const VValidation = genericComponent()({
 const makeVBottomSheetProps = propsFactory({
   inset: Boolean,
   ...makeVDialogProps({
-    contentClass: 'v-bottom-sheet__content',
     transition: 'bottom-sheet-transition'
   })
 }, 'VBottomSheet');
@@ -19603,11 +19619,13 @@ const VBottomSheet = genericComponent()({
     useRender(() => {
       const [dialogProps] = VDialog.filterProps(props);
       return createVNode(VDialog, mergeProps(dialogProps, {
+        "contentClass": ['v-bottom-sheet__content', props.contentClass],
         "modelValue": isActive.value,
         "onUpdate:modelValue": $event => isActive.value = $event,
         "class": ['v-bottom-sheet', {
           'v-bottom-sheet--inset': props.inset
-        }]
+        }, props.class],
+        "style": props.style
       }), slots);
     });
     return {};
@@ -19994,7 +20012,7 @@ const singleSelectStrategy = {
       items,
       value
     } = _ref;
-    return new Set(value ? [items[0]?.value] : []);
+    return new Set(value ? [toRaw(items[0]?.value)] : []);
   },
   selectAll: _ref2 => {
     let {
@@ -20018,7 +20036,7 @@ const pageSelectStrategy = {
       selected
     } = _ref4;
     for (const item of items) {
-      if (value) selected.add(item.value);else selected.delete(item.value);
+      if (value) selected.add(toRaw(item.value));else selected.delete(toRaw(item.value));
     }
     return selected;
   },
@@ -20050,7 +20068,7 @@ const allSelectStrategy = {
       selected
     } = _ref7;
     for (const item of items) {
-      if (value) selected.add(item.value);else selected.delete(item.value);
+      if (value) selected.add(toRaw(item.value));else selected.delete(toRaw(item.value));
     }
     return selected;
   },
@@ -20076,6 +20094,10 @@ const makeDataTableSelectProps = propsFactory({
   modelValue: {
     type: Array,
     default: () => []
+  },
+  valueComparator: {
+    type: Function,
+    default: deepEqual
   }
 }, 'DataTable-select');
 const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
@@ -20085,7 +20107,9 @@ function provideSelection(props, _ref9) {
     currentPage
   } = _ref9;
   const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
-    return new Set(v);
+    return new Set(wrapInArray(v).map(v => {
+      return allItems.value.find(item => props.valueComparator(v, item.value))?.value ?? v;
+    }));
   }, v => {
     return [...v.values()];
   });
@@ -20104,10 +20128,10 @@ function provideSelection(props, _ref9) {
     }
   });
   function isSelected(items) {
-    return wrapInArray(items).every(item => selected.value.has(item.value));
+    return wrapInArray(items).every(item => selected.value.has(toRaw(item.value)));
   }
   function isSomeSelected(items) {
-    return wrapInArray(items).some(item => selected.value.has(item.value));
+    return wrapInArray(items).some(item => selected.value.has(toRaw(item.value)));
   }
   function select(items, value) {
     const newSelected = selectStrategy.value.select({
@@ -20135,7 +20159,7 @@ function provideSelection(props, _ref9) {
       allItems: allSelectable.value,
       currentPage: currentPageSelectable.value
     });
-    return isSelected(items);
+    return !!items.length && isSelected(items);
   });
   const data = {
     toggleSelect,
@@ -20188,6 +20212,7 @@ function provideSort(options) {
     page
   } = options;
   const toggleSort = column => {
+    if (column.key == null) return;
     let newSortBy = sortBy.value.map(x => ({
       ...x
     })) ?? [];
@@ -20698,17 +20723,15 @@ function createHeaders(props, options) {
         column,
         row
       } = _ref4;
-      let key = column.key;
-      if (key == null) {
-        consoleWarn('The header key value must not be null or undefined');
-        key = '';
-      }
+      const key = column.key ?? (typeof column.value === 'string' ? column.value : null);
+      const value = column.value ?? column.key ?? null;
       for (let i = row; i <= row + (column.rowspan ?? 1) - 1; i++) {
         fixedRows[i].push({
           ...column,
           key,
+          value,
           fixedOffset: fixedOffsets[i],
-          sortable: column.sortable ?? !!column.key
+          sortable: column.sortable ?? key != null
         });
         fixedOffsets[i] += Number(column.width ?? 0);
       }
@@ -20987,7 +21010,7 @@ const makeVDataTableRowProps = propsFactory({
   item: Object,
   onClick: Function
 }, 'VDataTableRow');
-const VDataTableRow = defineComponent({
+const VDataTableRow = genericComponent()({
   name: 'VDataTableRow',
   props: makeVDataTableRowProps(),
   setup(props, _ref) {
@@ -21023,8 +21046,10 @@ const VDataTableRow = defineComponent({
         const slotName = `item.${column.key}`;
         const slotProps = {
           index: props.index,
-          item: props.item,
-          columns: columns.value,
+          item: item.raw,
+          internalItem: item,
+          value: getObjectValueByPath(item.columns, column.key),
+          column,
           isSelected,
           toggleSelect,
           isExpanded,
@@ -21046,7 +21071,7 @@ const VDataTableRow = defineComponent({
             "onClick": withModifiers(() => toggleExpand(item), ['stop'])
           }, null);
         }
-        return getPropertyFromItem(item.columns, column.key);
+        return toDisplayString(slotProps.value);
       }
     }))]));
   }
@@ -21135,7 +21160,8 @@ const VDataTableRows = genericComponent()({
         }
         const slotProps = {
           index,
-          item,
+          item: item.raw,
+          internalItem: item,
           columns: columns.value,
           isExpanded,
           toggleExpand,
@@ -21151,7 +21177,8 @@ const VDataTableRows = genericComponent()({
                 toggleExpand(item);
               }
               props['onClick:row']?.(event, {
-                item
+                item: item.raw,
+                internalItem: item
               });
             } : undefined,
             index,
@@ -21189,7 +21216,7 @@ function transformItem(props, item, index, columns) {
   const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue);
   const selectable = getPropertyFromItem(item, props.itemSelectable, true);
   const itemColumns = columns.reduce((obj, column) => {
-    obj[column.key] = getPropertyFromItem(item, column.value ?? column.key);
+    if (column.key != null) obj[column.key] = getPropertyFromItem(item, column.value);
     return obj;
   }, {});
   return {
@@ -21416,8 +21443,7 @@ const VDataTableVirtual = genericComponent()({
     'update:sortBy': value => true,
     'update:options': value => true,
     'update:groupBy': value => true,
-    'update:expanded': value => true,
-    'click:row': (e, value) => true
+    'update:expanded': value => true
   },
   setup(props, _ref) {
     let {
@@ -21623,8 +21649,7 @@ const VDataTableServer = genericComponent()({
     'update:sortBy': sortBy => true,
     'update:options': options => true,
     'update:expanded': options => true,
-    'update:groupBy': value => true,
-    'click:row': (e, value) => true
+    'update:groupBy': value => true
   },
   setup(props, _ref) {
     let {
@@ -21787,13 +21812,13 @@ const makeVDatePickerControlsProps = propsFactory({
     type: [String],
     default: '$prev'
   },
-  expandIcon: {
+  modeIcon: {
     type: [String],
-    default: '$expand'
+    default: '$subgroup'
   },
-  collapseIcon: {
-    type: [String],
-    default: '$collapse'
+  variant: {
+    type: String,
+    default: 'modern'
   },
   viewMode: {
     type: String,
@@ -21812,9 +21837,6 @@ const VDatePickerControls = genericComponent()({
     let {
       emit
     } = _ref;
-    const modeIcon = computed(() => {
-      return props.viewMode === 'month' ? props.expandIcon : props.collapseIcon;
-    });
     const disableMode = computed(() => {
       return Array.isArray(props.disabled) ? props.disabled.includes('mode') : !!props.disabled;
     });
@@ -21834,17 +21856,21 @@ const VDatePickerControls = genericComponent()({
       emit('click:mode');
     }
     useRender(() => {
-      return createVNode("div", {
-        "class": "v-date-picker-controls"
-      }, [createVNode("div", {
+      const displayDate = createVNode("div", {
         "class": "v-date-picker-controls__date"
-      }, [props.displayDate]), createVNode(VBtn, {
+      }, [props.displayDate]);
+      return createVNode("div", {
+        "class": ['v-date-picker-controls', `v-date-picker-controls--variant-${props.variant}`]
+      }, [props.variant === 'modern' && createVNode(Fragment, null, [displayDate, createVNode(VBtn, {
+        "key": "mode-btn",
         "disabled": disableMode.value,
-        "key": "expand-btn",
-        "icon": modeIcon.value,
+        "density": "comfortable",
+        "icon": props.modeIcon,
         "variant": "text",
         "onClick": onClickMode
-      }, null), createVNode(VSpacer, null, null), createVNode("div", {
+      }, null), createVNode(VSpacer, {
+        "key": "mode-spacer"
+      }, null)]), createVNode("div", {
         "key": "month-buttons",
         "class": "v-date-picker-controls__month"
       }, [createVNode(VBtn, {
@@ -21852,7 +21878,7 @@ const VDatePickerControls = genericComponent()({
         "icon": props.prevIcon,
         "variant": "text",
         "onClick": onClickPrev
-      }, null), createVNode(VBtn, {
+      }, null), props.variant === 'classic' && displayDate, createVNode(VBtn, {
         "disabled": disableNext.value,
         "icon": props.nextIcon,
         "variant": "text",
@@ -22025,8 +22051,8 @@ function getWeekArray(date, locale) {
   let currentWeek = [];
   const firstDayOfMonth = startOfMonth(date);
   const lastDayOfMonth = endOfMonth(date);
-  const firstDayWeekIndex = firstDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()];
-  const lastDayWeekIndex = lastDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()];
+  const firstDayWeekIndex = (firstDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()] + 7) % 7;
+  const lastDayWeekIndex = (lastDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()] + 7) % 7;
   for (let i = 0; i < firstDayWeekIndex; i++) {
     const adjacentDay = new Date(firstDayOfMonth);
     adjacentDay.setDate(adjacentDay.getDate() - (firstDayWeekIndex - i));
@@ -22129,6 +22155,11 @@ function format(value, formatString, locale) {
         day: 'numeric'
       };
       break;
+    case 'shortDate':
+      options = {
+        year: 'numeric'
+      };
+      break;
     default:
       options = {
         timeZone: 'UTC',
@@ -22754,8 +22785,7 @@ const VDatePickerMonth = genericComponent()({
         "key": "in-hover",
         "class": "v-date-picker-month__day--hover"
       }, null), (props.showAdjacentMonths || !item.isAdjacent) && createVNode(VBtn, {
-        "active": item.isSelected,
-        "color": color,
+        "color": !item.isToday || item.isSelected ? color : undefined,
         "disabled": item.isDisabled,
         "icon": true,
         "ripple": false,
@@ -22790,7 +22820,7 @@ const VDatePickerYears = genericComponent()({
     const years = computed(() => {
       const min = props.min ? adapter.date(props.min).getFullYear() : displayYear.value - 100;
       const max = props.max ? adapter.date(props.max).getFullYear() : displayYear.value + 50;
-      return createRange(max - min, min);
+      return createRange(max - min + 1, min);
     });
     const yearRef = ref();
     onMounted(() => {
@@ -22928,12 +22958,14 @@ const makeVDatePickerHeaderProps = propsFactory({
   appendIcon: String,
   color: String,
   header: String,
-  transition: String
+  transition: String,
+  onClick: EventProp()
 }, 'VDatePickerHeader');
 const VDatePickerHeader = genericComponent()({
   name: 'VDatePickerHeader',
   props: makeVDatePickerHeaderProps(),
   emits: {
+    click: () => true,
     'click:append': () => true
   },
   setup(props, _ref) {
@@ -22945,6 +22977,9 @@ const VDatePickerHeader = genericComponent()({
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(props, 'color');
+    function onClick() {
+      emit('click');
+    }
     function onClickAppend() {
       emit('click:append');
     }
@@ -22952,8 +22987,11 @@ const VDatePickerHeader = genericComponent()({
       const hasContent = !!(slots.default || props.header);
       const hasAppend = !!(slots.append || props.appendIcon);
       return createVNode("div", {
-        "class": ['v-date-picker-header', backgroundColorClasses.value],
-        "style": backgroundColorStyles.value
+        "class": ['v-date-picker-header', {
+          'v-date-picker-header--clickable': !!props.onClick
+        }, backgroundColorClasses.value],
+        "style": backgroundColorStyles.value,
+        "onClick": onClick
       }, [slots.prepend && createVNode("div", {
         "key": "prepend",
         "class": "v-date-picker-header__prepend"
@@ -22995,9 +23033,10 @@ const VPickerTitle = createSimpleFunctional('v-picker-title');
 // Types
 
 const makeVPickerProps = propsFactory({
+  bgColor: String,
   landscape: Boolean,
   title: String,
-  ...omit(makeVSheetProps(), ['color'])
+  ...makeVSheetProps()
 }, 'VPicker');
 const VPicker = genericComponent()({
   name: 'VPicker',
@@ -23006,23 +23045,31 @@ const VPicker = genericComponent()({
     let {
       slots
     } = _ref;
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'color'));
     useRender(() => {
       const [sheetProps] = VSheet.filterProps(props);
       const hasTitle = !!(props.title || slots.title);
       return createVNode(VSheet, mergeProps(sheetProps, {
+        "color": props.bgColor,
         "class": ['v-picker', {
           'v-picker--landscape': props.landscape,
           'v-picker--with-actions': !!slots.actions
         }, props.class],
         "style": props.style
       }), {
-        default: () => [hasTitle && createVNode(VPickerTitle, {
+        default: () => [createVNode("div", {
+          "class": [backgroundColorClasses.value],
+          "style": [backgroundColorStyles.value]
+        }, [hasTitle && createVNode(VPickerTitle, {
           "key": "picker-title"
         }, {
           default: () => [slots.title?.() ?? props.title]
         }), slots.header && createVNode("div", {
           "class": "v-picker__header"
-        }, [slots.header()]), createVNode("div", {
+        }, [slots.header()])]), createVNode("div", {
           "class": "v-picker__body"
         }, [slots.default?.()]), slots.actions?.()[0]?.children && createVNode("div", {
           "class": "v-picker__actions"
@@ -23100,7 +23147,9 @@ const VDatePicker = genericComponent()({
     const isReversing = shallowRef(false);
     const inputModel = ref(model.value.map(date => adapter.format(date, 'keyboardDate')));
     const temporaryModel = ref(model.value);
-    const title = computed(() => t(props.title));
+    const title = computed(() => {
+      return props.variant === 'modern' ? t(props.title) : adapter.format(displayDate.value, 'shortDate');
+    });
     const header = computed(() => model.value.length ? adapter.format(model.value[0], 'normalDateWithWeekday') : t(props.header));
     const headerIcon = computed(() => inputMode.value === 'calendar' ? props.keyboardIcon : props.calendarIcon);
     const headerTransition = computed(() => `date-picker-header${isReversing.value ? '-reverse' : ''}-transition`);
@@ -23172,6 +23221,9 @@ const VDatePicker = genericComponent()({
     function onClickMode() {
       viewMode.value = viewMode.value === 'month' ? 'year' : 'month';
     }
+    function onClickHeader() {
+      viewMode.value = 'month';
+    }
     const headerSlotProps = computed(() => ({
       header: header.value,
       appendIcon: headerIcon.value,
@@ -23184,15 +23236,20 @@ const VDatePicker = genericComponent()({
       const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
       const [datePickerYearsProps] = VDatePickerYears.filterProps(props);
       return createVNode(VPicker, mergeProps(pickerProps, {
-        "class": ['v-date-picker', props.class],
+        "class": ['v-date-picker', `v-date-picker--${viewMode.value}`, props.class],
         "style": props.style,
-        "title": title.value,
         "width": props.showWeek ? 408 : 360
       }), {
+        title: () => slots.title?.() ?? createVNode("div", {
+          "class": "v-date-picker__title",
+          "onClick": props.variant === 'classic' ? onClickMode : undefined
+        }, [title.value]),
         header: () => slots.header?.(headerSlotProps.value) ?? createVNode(VDatePickerHeader, mergeProps({
           "key": "header"
-        }, headerSlotProps.value), null),
-        default: () => inputMode.value === 'calendar' ? createVNode(Fragment, null, [createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
+        }, headerSlotProps.value, {
+          "onClick": viewMode.value === 'year' ? onClickHeader : undefined
+        }), null),
+        default: () => inputMode.value === 'calendar' ? createVNode(Fragment, null, [(props.variant !== 'classic' || viewMode.value !== 'year') && createVNode(VDatePickerControls, mergeProps(datePickerControlsProps, {
           "disabled": disabled.value,
           "displayDate": adapter.format(displayDate.value, 'monthAndYear'),
           "onClick:next": onClickNext,
@@ -23226,7 +23283,7 @@ const VDatePicker = genericComponent()({
           "label": t(props.inputText),
           "placeholder": props.inputPlaceholder
         }, null)]),
-        actions: () => !props.hideActions ? createVNode("div", null, [createVNode(VBtn, {
+        actions: () => !props.hideActions ? slots.actions?.() ?? createVNode("div", null, [createVNode(VBtn, {
           "variant": "text",
           "color": props.color,
           "onClick": onClickCancel,
@@ -23601,7 +23658,7 @@ const VOtpInput = genericComponent()({
       scoped: true
     });
     watch(model, val => {
-      if (val.length === props.length) emit('finish', val.join(''));
+      if (val.length === Number(props.length)) emit('finish', val.join(''));
     }, {
       deep: true
     });
@@ -24559,7 +24616,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "3.3.16";
+const version$1 = "3.3.18";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -24573,7 +24630,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.3.16";
+const version = "3.3.18";
 
 /* eslint-disable local-rules/sort-imports */