vuetify 3.7.15 → 3.7.16

package/dist/vuetify-labs.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.7.15
+* Vuetify v3.7.16
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 // Types
 // eslint-disable-line vue/prefer-import-from-vue
@@ -151,12 +151,14 @@ function convertToUnit(str) {
   let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'px';
   if (str == null || str === '') {
     return undefined;
-  } else if (isNaN(+str)) {
+  }
+  const num = Number(str);
+  if (isNaN(num)) {
     return String(str);
-  } else if (!isFinite(+str)) {
+  } else if (!isFinite(num)) {
     return undefined;
   } else {
-    return `${Number(str)}${unit}`;
+    return `${num}${unit}`;
   }
 }
 function isObject(obj) {
@@ -690,16 +692,16 @@ function nullifyTransforms(el) {
     let ta, sx, sy, dx, dy;
     if (tx.startsWith('matrix3d(')) {
       ta = tx.slice(9, -1).split(/, /);
-      sx = +ta[0];
-      sy = +ta[5];
-      dx = +ta[12];
-      dy = +ta[13];
+      sx = Number(ta[0]);
+      sy = Number(ta[5]);
+      dx = Number(ta[12]);
+      dy = Number(ta[13]);
     } else if (tx.startsWith('matrix(')) {
       ta = tx.slice(7, -1).split(/, /);
-      sx = +ta[0];
-      sy = +ta[3];
-      dx = +ta[4];
-      dy = +ta[5];
+      sx = Number(ta[0]);
+      sy = Number(ta[3]);
+      dx = Number(ta[4]);
+      dy = Number(ta[5]);
     } else {
       return new Box(rect);
     }
@@ -2075,7 +2077,7 @@ var en = {
 const LANG_PREFIX = '$vuetify.';
 const replace = (str, params) => {
   return str.replace(/\{(\d+)\}/g, (match, index) => {
-    return String(params[+index]);
+    return String(params[Number(index)]);
   });
 };
 const createTranslateFunction = (current, fallback, messages) => {
@@ -5572,7 +5574,10 @@ const makeVBtnProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  text: String,
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -5728,7 +5733,7 @@ const VBtn = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.default?.() ?? props.text]
+          default: () => [slots.default?.() ?? toDisplayString(props.text)]
         })]), !props.icon && hasAppend && createVNode("span", {
           "key": "append",
           "class": "v-btn__append"
@@ -6736,7 +6741,7 @@ function useValidation(props) {
   const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
   const errorMessages = computed(() => {
-    return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
+    return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, Number(props.maxErrors))) : internalErrorMessages.value;
   });
   const validateOn = computed(() => {
     let value = (props.validateOn ?? form.validateOn?.value) || 'input';
@@ -6827,7 +6832,7 @@ function useValidation(props) {
     const results = [];
     isValidating.value = true;
     for (const rule of props.rules) {
-      if (results.length >= +(props.maxErrors ?? 1)) {
+      if (results.length >= Number(props.maxErrors ?? 1)) {
         break;
       }
       const handler = typeof rule === 'function' ? rule : () => rule;
@@ -7888,7 +7893,10 @@ const makeVChipProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  text: String,
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   modelValue: {
     type: Boolean,
     default: true
@@ -8057,7 +8065,7 @@ const VChip = genericComponent()({
           toggle: group?.toggle,
           value: group?.value.value,
           disabled: props.disabled
-        }) ?? props.text]), hasAppend && createVNode("div", {
+        }) ?? toDisplayString(props.text)]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-chip__append"
         }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
@@ -8936,8 +8944,14 @@ const makeVListItemProps = propsFactory({
     default: true
   },
   slim: Boolean,
-  subtitle: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   value: null,
   onClick: EventProp(),
   onClickOnce: EventProp(),
@@ -9130,13 +9144,13 @@ const VListItem = genericComponent()({
         }, {
           default: () => [slots.title?.({
             title: props.title
-          }) ?? props.title]
+          }) ?? toDisplayString(props.title)]
         }), hasSubtitle && createVNode(VListItemSubtitle, {
           "key": "subtitle"
         }, {
           default: () => [slots.subtitle?.({
             subtitle: props.subtitle
-          }) ?? props.subtitle]
+          }) ?? toDisplayString(props.subtitle)]
         }), slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-list-item__append"
@@ -10737,10 +10751,10 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     activeChildren: new Set()
   });
   provide(StackSymbol, stack);
-  const _zIndex = shallowRef(+zIndex.value);
+  const _zIndex = shallowRef(Number(zIndex.value));
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1];
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
+    _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
     if (createStackEntry) {
       globalStack.push([vm.uid, _zIndex.value]);
     }
@@ -10949,6 +10963,7 @@ const VOverlay = genericComponent()({
   emits: {
     'click:outside': e => true,
     'update:modelValue': value => true,
+    keydown: e => true,
     afterEnter: () => true,
     afterLeave: () => true
   },
@@ -11061,6 +11076,9 @@ const VOverlay = genericComponent()({
     });
     function onKeydown(e) {
       if (e.key === 'Escape' && globalTop.value) {
+        if (!contentEl.value?.contains(document.activeElement)) {
+          emit('keydown', e);
+        }
         if (!props.persistent) {
           isActive.value = false;
           if (contentEl.value?.contains(document.activeElement)) {
@@ -11069,6 +11087,10 @@ const VOverlay = genericComponent()({
         } else animateClick();
       }
     }
+    function onKeydownSelf(e) {
+      if (e.key === 'Escape' && !globalTop.value) return;
+      emit('keydown', e);
+    }
     const router = useRouter();
     useToggleScope(() => props.closeOnBack, () => {
       useBackButton(router, next => {
@@ -11131,7 +11153,8 @@ const VOverlay = genericComponent()({
           '--v-overlay-opacity': props.opacity,
           top: convertToUnit(top.value)
         }, props.style],
-        "ref": root
+        "ref": root,
+        "onKeydown": onKeydownSelf
       }, scopeId, attrs), [createVNode(Scrim, mergeProps({
         "color": scrimColor,
         "modelValue": isActive.value && !!props.scrim,
@@ -13522,11 +13545,11 @@ const VBadge = genericComponent()({
       locationStyles
     } = useLocation(props, true, side => {
       const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
-      return base + (['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0) : 0);
+      return base + (['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0) : 0);
     });
     useRender(() => {
       const value = Number(props.content);
-      const content = !props.max || isNaN(value) ? props.content : value <= +props.max ? value : `${props.max}+`;
+      const content = !props.max || isNaN(value) ? props.content : value <= Number(props.max) ? value : `${props.max}+`;
       const [badgeAttrs, attrs] = pickWithRest(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
       return createVNode(props.tag, mergeProps({
         "class": ['v-badge', {
@@ -14225,8 +14248,14 @@ const makeCardItemProps = propsFactory({
   appendIcon: IconValue,
   prependAvatar: String,
   prependIcon: IconValue,
-  subtitle: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeComponentProps(),
   ...makeDensityProps()
 }, 'VCardItem');
@@ -14276,11 +14305,11 @@ const VCardItem = genericComponent()({
       }, [hasTitle && createVNode(VCardTitle, {
         "key": "title"
       }, {
-        default: () => [slots.title?.() ?? props.title]
+        default: () => [slots.title?.() ?? toDisplayString(props.title)]
       }), hasSubtitle && createVNode(VCardSubtitle, {
         "key": "subtitle"
       }, {
-        default: () => [slots.subtitle?.() ?? props.subtitle]
+        default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
       }), slots.default?.()]), hasAppend && createVNode("div", {
         "key": "append",
         "class": "v-card-item__append"
@@ -14352,9 +14381,18 @@ const makeVCardProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  subtitle: [String, Number],
-  text: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -14823,7 +14861,7 @@ const VCarousel = genericComponent()({
     onMounted(startTimeout);
     function startTimeout() {
       if (!props.cycle || !windowRef.value) return;
-      slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000);
+      slideTimeout = window.setTimeout(windowRef.value.group.next, Number(props.interval) > 0 ? Number(props.interval) : 6000);
     }
     function restartTimeout() {
       window.clearTimeout(slideTimeout);
@@ -15549,7 +15587,7 @@ const makeSliderProps = propsFactory({
 const useSteps = props => {
   const min = computed(() => parseFloat(props.min));
   const max = computed(() => parseFloat(props.max));
-  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+  const step = computed(() => Number(props.step) > 0 ? parseFloat(props.step) : 0);
   const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
   function roundValue(value) {
     value = parseFloat(value);
@@ -18504,8 +18542,8 @@ const makeDataTablePaginateProps = propsFactory({
 }, 'DataTable-paginate');
 const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
 function createPagination(props) {
-  const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1));
-  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10));
+  const page = useProxiedModel(props, 'page', undefined, value => Number(value ?? 1));
+  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => Number(value ?? 10));
   return {
     page,
     itemsPerPage
@@ -19294,7 +19332,7 @@ const VPagination = genericComponent()({
       const minButtons = props.showFirstLastPage ? 5 : 3;
       return Math.max(0, Math.floor(
       // Round to two decimal places to avoid floating point errors
-      +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
+      Number(((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2))));
     }
     const range = computed(() => {
       if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
@@ -19365,7 +19403,7 @@ const VPagination = genericComponent()({
               ref,
               ellipsis: false,
               icon: true,
-              disabled: !!props.disabled || +props.length < 2,
+              disabled: !!props.disabled || Number(props.length) < 2,
               color: isActive ? props.activeColor : props.color,
               'aria-current': isActive,
               'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
@@ -19414,7 +19452,7 @@ const VPagination = genericComponent()({
       refs.value[currentIndex]?.$el.focus();
     }
     function onKeydown(e) {
-      if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
+      if (e.key === keyValues.left && !props.disabled && page.value > Number(props.start)) {
         page.value = page.value - 1;
         nextTick(updateFocus);
       } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
@@ -19747,8 +19785,10 @@ function parseFixedColumns(items) {
       } else {
         if (!seenFixed) {
           item.lastFixed = true;
-        } else if (isNaN(+item.width)) {
+        } else if (isNaN(Number(item.width))) {
           consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`);
+        } else {
+          item.minWidth = Math.max(Number(item.width) || 0, Number(item.minWidth) || 0);
         }
         seenFixed = true;
       }
@@ -21881,7 +21921,7 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
-    return () => createVNode("div", {
+    useRender(() => createVNode("div", {
       "class": "v-date-picker-month"
     }, [props.showWeek && createVNode("div", {
       "key": "weeks",
@@ -21903,6 +21943,13 @@ const VDatePickerMonth = genericComponent()({
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
           props: {
+            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 ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
             onClick: () => onClick(item.date)
           },
           item,
@@ -21920,24 +21967,9 @@ const VDatePickerMonth = genericComponent()({
             'v-date-picker-month__day--week-start': item.isWeekStart
           }],
           "data-v-date": !item.isDisabled ? item.isoDate : undefined
-        }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              class: 'v-date-picker-month__day-btn',
-              color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
-              disabled: item.isDisabled,
-              icon: true,
-              ripple: false,
-              text: item.localized,
-              variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
-              onClick: () => onClick(item.date)
-            }
-          }
-        }, {
-          default: () => [slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null)]
-        })]);
+        }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null))]);
       })])]
-    })]);
+    })]));
   }
 });
 
@@ -24694,7 +24726,7 @@ const VParallax = genericComponent()({
     watch(displayHeight, onScroll);
     watch(() => contentRect.value?.height, onScroll);
     const scale = computed(() => {
-      return 1 - clamp(+props.scale);
+      return 1 - clamp(Number(props.scale));
     });
     let frame = -1;
     function onScroll() {
@@ -25115,7 +25147,7 @@ const VRating = genericComponent()({
       themeClasses
     } = provideTheme(props);
     const rating = useProxiedModel(props, 'modelValue');
-    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length));
+    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, Number(props.length)));
     const range = computed(() => createRange(Number(props.length), 1));
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
     const hoverIndex = shallowRef(-1);
@@ -25726,7 +25758,7 @@ const VBarline = genericComponent()({
         const height = Math.abs(gridY * value);
         return {
           x: minX + index * gridX,
-          y: horizonY - height + +(value < 0) * height,
+          y: horizonY - height + Number(value < 0) * height,
           height,
           value
         };
@@ -27164,10 +27196,10 @@ const VTextarea = genericComponent()({
       }
     }
     const sizerRef = ref();
-    const rows = ref(+props.rows);
+    const rows = ref(Number(props.rows));
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     watchEffect(() => {
-      if (!props.autoGrow) rows.value = +props.rows;
+      if (!props.autoGrow) rows.value = Number(props.rows);
     });
     function calculateInputHeight() {
       if (!props.autoGrow) return;
@@ -28214,8 +28246,8 @@ const makeVDateInputProps = propsFactory({
     prependIcon: '$calendar'
   }),
   ...omit(makeVDatePickerProps({
-    weeksInMonth: 'dynamic',
-    hideHeader: true
+    hideHeader: true,
+    showAdjacentMonths: true
   }), ['active', 'location', 'rounded'])
 }, 'VDateInput');
 const VDateInput = genericComponent()({
@@ -28299,6 +28331,7 @@ const VDateInput = genericComponent()({
           "onUpdate:modelValue": $event => menu.value = $event,
           "activator": "parent",
           "min-width": "0",
+          "eager": isFocused.value,
           "location": props.location,
           "closeOnContentClick": false,
           "openOnClick": false
@@ -28538,8 +28571,9 @@ const VFileUpload = genericComponent()({
       inputRef.value?.click();
     }
     function onClickRemove(index) {
-      model.value = model.value.filter((_, i) => i !== index);
-      if (model.value.length > 0 || !inputRef.value) return;
+      const newValue = model.value.filter((_, i) => i !== index);
+      model.value = newValue;
+      if (newValue.length > 0 || !inputRef.value) return;
       inputRef.value.value = '';
     }
     useRender(() => {
@@ -28750,7 +28784,7 @@ const VNumberInput = genericComponent()({
       return isFocused.value ? Number(fixed).toString() // trim zeros
       : fixed;
     }
-    const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(+val, props.min, props.max));
+    const model = useProxiedModel(props, 'modelValue', null, val => val ?? null, val => val == null ? val ?? null : clamp(Number(val), props.min, props.max));
     const _inputText = shallowRef(null);
     watchEffect(() => {
       if (isFocused.value && !controlsDisabled.value) ; else if (model.value == null) {
@@ -28765,8 +28799,8 @@ const VNumberInput = genericComponent()({
         if (val === null || val === '') {
           model.value = null;
           _inputText.value = null;
-        } else if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
-          model.value = +val;
+        } else if (!isNaN(Number(val)) && Number(val) <= props.max && Number(val) >= props.min) {
+          model.value = Number(val);
           _inputText.value = val;
         }
       }
@@ -28890,8 +28924,8 @@ const VNumberInput = genericComponent()({
       if (controlsDisabled.value) return;
       if (!vTextFieldRef.value) return;
       const actualText = vTextFieldRef.value.value;
-      if (actualText && !isNaN(+actualText)) {
-        inputText.value = correctPrecision(clamp(+actualText, props.min, props.max));
+      if (actualText && !isNaN(Number(actualText))) {
+        inputText.value = correctPrecision(clamp(Number(actualText), props.min, props.max));
       } else {
         inputText.value = null;
       }
@@ -29765,14 +29799,7 @@ const VTimePickerClock = genericComponent()({
   }
 });
 
-// @ts-nocheck
-/* eslint-disable */
-var SelectingTimes = /*#__PURE__*/function (SelectingTimes) {
-  SelectingTimes[SelectingTimes["Hour"] = 1] = "Hour";
-  SelectingTimes[SelectingTimes["Minute"] = 2] = "Minute";
-  SelectingTimes[SelectingTimes["Second"] = 3] = "Second";
-  return SelectingTimes;
-}(SelectingTimes || {});
+// Types
 
 const makeVTimePickerControlsProps = propsFactory({
   ampm: Boolean,
@@ -29786,15 +29813,15 @@ const makeVTimePickerControlsProps = propsFactory({
   period: String,
   readonly: Boolean,
   useSeconds: Boolean,
-  selecting: Number,
-  value: Number
+  value: Number,
+  viewMode: String
 }, 'VTimePickerControls');
 const VTimePickerControls = genericComponent()({
   name: 'VTimePickerControls',
   props: makeVTimePickerControlsProps(),
   emits: {
     'update:period': data => true,
-    'update:selecting': data => true
+    'update:viewMode': data => true
   },
   setup(props, _ref) {
     let {
@@ -29817,8 +29844,8 @@ const VTimePickerControls = genericComponent()({
           'v-time-picker-controls__time--with-seconds': props.useSeconds
         }
       }, [createVNode(VBtn, {
-        "active": props.selecting === 1,
-        "color": props.selecting === 1 ? props.color : undefined,
+        "active": props.viewMode === 'hour',
+        "color": props.viewMode === 'hour' ? props.color : undefined,
         "disabled": props.disabled,
         "variant": "tonal",
         "class": {
@@ -29827,24 +29854,24 @@ const VTimePickerControls = genericComponent()({
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
         },
         "text": props.hour == null ? '--' : pad(`${hour}`),
-        "onClick": () => emit('update:selecting', SelectingTimes.Hour)
+        "onClick": () => emit('update:viewMode', 'hour')
       }, null), createVNode("span", {
         "class": ['v-time-picker-controls__time__separator', {
           'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
         }]
       }, [createTextVNode(":")]), createVNode(VBtn, {
-        "active": props.selecting === 2,
-        "color": props.selecting === 2 ? props.color : undefined,
+        "active": props.viewMode === 'minute',
+        "color": props.viewMode === 'minute' ? props.color : undefined,
         "class": {
           'v-time-picker-controls__time__btn': true,
-          'v-time-picker-controls__time__btn__active': props.selecting === 2,
+          'v-time-picker-controls__time__btn__active': props.viewMode === 'minute',
           'v-time-picker-controls__time--with-ampm__btn': props.ampm,
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
         },
         "disabled": props.disabled,
         "variant": "tonal",
         "text": props.minute == null ? '--' : pad(props.minute),
-        "onClick": () => emit('update:selecting', SelectingTimes.Minute)
+        "onClick": () => emit('update:viewMode', 'minute')
       }, null), props.useSeconds && createVNode("span", {
         "class": ['v-time-picker-controls__time__separator', {
           'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
@@ -29852,11 +29879,13 @@ const VTimePickerControls = genericComponent()({
         "key": "secondsDivider"
       }, [createTextVNode(":")]), props.useSeconds && createVNode(VBtn, {
         "key": "secondsVal",
+        "active": props.viewMode === 'second',
+        "color": props.viewMode === 'second' ? props.color : undefined,
         "variant": "tonal",
-        "onClick": () => emit('update:selecting', SelectingTimes.Second),
+        "onClick": () => emit('update:viewMode', 'second'),
         "class": {
           'v-time-picker-controls__time__btn': true,
-          'v-time-picker-controls__time__btn__active': props.selecting === 3,
+          'v-time-picker-controls__time__btn__active': props.viewMode === 'second',
           'v-time-picker-controls__time--with-seconds__btn': props.useSeconds
         },
         "disabled": props.disabled,
@@ -29901,11 +29930,6 @@ const rangeHours24 = createRange(24);
 const rangeHours12am = createRange(12);
 const rangeHours12pm = rangeHours12am.map(v => v + 12);
 createRange(60);
-const selectingNames = {
-  1: 'hour',
-  2: 'minute',
-  3: 'second'
-};
 const makeVTimePickerProps = propsFactory({
   allowedHours: [Function, Array],
   allowedMinutes: [Function, Array],
@@ -29918,6 +29942,10 @@ const makeVTimePickerProps = propsFactory({
   },
   max: String,
   min: String,
+  viewMode: {
+    type: String,
+    default: 'hour'
+  },
   modelValue: null,
   readonly: Boolean,
   scrollable: Boolean,
@@ -29934,7 +29962,8 @@ const VTimePicker = genericComponent()({
     'update:minute': val => true,
     'update:period': val => true,
     'update:second': val => true,
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:viewMode': val => true
   },
   setup(props, _ref) {
     let {
@@ -29951,7 +29980,7 @@ const VTimePicker = genericComponent()({
     const lazyInputMinute = ref(null);
     const lazyInputSecond = ref(null);
     const period = ref('am');
-    const selecting = ref(SelectingTimes.Hour);
+    const viewMode = useProxiedModel(props, 'viewMode', 'hour');
     const controlsRef = ref(null);
     const clockRef = ref(null);
     const isAllowedHourCb = computed(() => {
@@ -29965,7 +29994,7 @@ const VTimePicker = genericComponent()({
       const minHour = props.min ? Number(props.min.split(':')[0]) : 0;
       const maxHour = props.max ? Number(props.max.split(':')[0]) : 23;
       return val => {
-        return val >= minHour * 1 && val <= maxHour * 1 && (!cb || cb(val));
+        return val >= Number(minHour) && val <= Number(maxHour) && (!cb || cb(val));
       };
     });
     const isAllowedMinuteCb = computed(() => {
@@ -29981,8 +30010,8 @@ const VTimePicker = genericComponent()({
       }
       const [minHour, minMinute] = props.min ? props.min.split(':').map(Number) : [0, 0];
       const [maxHour, maxMinute] = props.max ? props.max.split(':').map(Number) : [23, 59];
-      const minTime = minHour * 60 + minMinute * 1;
-      const maxTime = maxHour * 60 + maxMinute * 1;
+      const minTime = minHour * 60 + Number(minMinute);
+      const maxTime = maxHour * 60 + Number(maxMinute);
       return val => {
         const time = 60 * inputHour.value + val;
         return time >= minTime && time <= maxTime && isHourAllowed && (!cb || cb(val));
@@ -30002,8 +30031,8 @@ const VTimePicker = genericComponent()({
       }
       const [minHour, minMinute, minSecond] = props.min ? props.min.split(':').map(Number) : [0, 0, 0];
       const [maxHour, maxMinute, maxSecond] = props.max ? props.max.split(':').map(Number) : [23, 59, 59];
-      const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1;
-      const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1;
+      const minTime = minHour * 3600 + minMinute * 60 + Number(minSecond || 0);
+      const maxTime = maxHour * 3600 + maxMinute * 60 + Number(maxSecond || 0);
       return val => {
         const time = 3600 * inputHour.value + 60 * inputMinute.value + val;
         return time >= minTime && time <= maxTime && isMinuteAllowed && (!cb || cb(val));
@@ -30069,16 +30098,16 @@ const VTimePicker = genericComponent()({
       return true;
     }
     function onInput(value) {
-      if (selecting.value === SelectingTimes.Hour) {
+      if (viewMode.value === 'hour') {
         inputHour.value = isAmPm.value ? convert12to24(value, period.value) : value;
-      } else if (selecting.value === SelectingTimes.Minute) {
+      } else if (viewMode.value === 'minute') {
         inputMinute.value = value;
       } else {
         inputSecond.value = value;
       }
     }
     function onChange(value) {
-      switch (selectingNames[selecting.value]) {
+      switch (viewMode.value || 'hour') {
         case 'hour':
           emit('update:hour', value);
           break;
@@ -30090,10 +30119,10 @@ const VTimePicker = genericComponent()({
           break;
       }
       const emitChange = inputHour.value !== null && inputMinute.value !== null && (props.useSeconds ? inputSecond.value !== null : true);
-      if (selecting.value === SelectingTimes.Hour) {
-        selecting.value = SelectingTimes.Minute;
-      } else if (props.useSeconds && selecting.value === SelectingTimes.Minute) {
-        selecting.value = SelectingTimes.Second;
+      if (viewMode.value === 'hour') {
+        viewMode.value = 'minute';
+      } else if (props.useSeconds && viewMode.value === 'minute') {
+        viewMode.value = 'second';
       }
       if (inputHour.value === lazyInputHour.value && inputMinute.value === lazyInputMinute.value && (!props.useSeconds || inputSecond.value === lazyInputSecond.value)) return;
       const time = genValue();
@@ -30122,20 +30151,20 @@ const VTimePicker = genericComponent()({
           "minute": inputMinute.value,
           "period": period.value,
           "second": inputSecond.value,
-          "selecting": selecting.value,
+          "viewMode": viewMode.value,
           "onUpdate:period": val => setPeriod(val),
-          "onUpdate:selecting": value => selecting.value = value,
+          "onUpdate:viewMode": value => viewMode.value = value,
           "ref": controlsRef
         }), null),
         default: () => createVNode(VTimePickerClock, mergeProps(timePickerClockProps, {
-          "allowedValues": selecting.value === SelectingTimes.Hour ? isAllowedHourCb.value : selecting.value === SelectingTimes.Minute ? isAllowedMinuteCb.value : isAllowedSecondCb.value,
-          "double": selecting.value === SelectingTimes.Hour && !isAmPm.value,
-          "format": selecting.value === SelectingTimes.Hour ? isAmPm.value ? convert24to12 : val => val : val => pad(val, 2),
-          "max": selecting.value === SelectingTimes.Hour ? isAmPm.value && period.value === 'am' ? 11 : 23 : 59,
-          "min": selecting.value === SelectingTimes.Hour && isAmPm.value && period.value === 'pm' ? 12 : 0,
+          "allowedValues": viewMode.value === 'hour' ? isAllowedHourCb.value : viewMode.value === 'minute' ? isAllowedMinuteCb.value : isAllowedSecondCb.value,
+          "double": viewMode.value === 'hour' && !isAmPm.value,
+          "format": viewMode.value === 'hour' ? isAmPm.value ? convert24to12 : val => val : val => pad(val, 2),
+          "max": viewMode.value === 'hour' ? isAmPm.value && period.value === 'am' ? 11 : 23 : 59,
+          "min": viewMode.value === 'hour' && isAmPm.value && period.value === 'pm' ? 12 : 0,
           "size": 20,
-          "step": selecting.value === SelectingTimes.Hour ? 1 : 5,
-          "modelValue": selecting.value === SelectingTimes.Hour ? inputHour.value : selecting.value === SelectingTimes.Minute ? inputMinute.value : inputSecond.value,
+          "step": viewMode.value === 'hour' ? 1 : 5,
+          "modelValue": viewMode.value === 'hour' ? inputHour.value : viewMode.value === 'minute' ? inputMinute.value : inputSecond.value,
           "onChange": onChange,
           "onInput": onInput,
           "ref": clockRef
@@ -31048,7 +31077,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.15";
+const version$1 = "3.7.16";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31301,7 +31330,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.7.15";
+const version = "3.7.16";
 
 /* eslint-disable local-rules/sort-imports */