vuetify 3.7.15 → 3.7.17

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.7.15
+* Vuetify v3.7.17
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -155,12 +155,14 @@
     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) {
@@ -694,16 +696,16 @@
       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);
       }
@@ -2079,7 +2081,7 @@
   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) => {
@@ -2449,7 +2451,7 @@
     function getHead() {
       return {
         style: [{
-          children: styles.value,
+          textContent: styles.value,
           id: 'vuetify-theme-stylesheet',
           nonce: parsedOptions.cspNonce || false
         }]
@@ -5576,7 +5578,10 @@
       type: [Boolean, Object],
       default: true
     },
-    text: String,
+    text: {
+      type: [String, Number, Boolean],
+      default: undefined
+    },
     ...makeBorderProps(),
     ...makeComponentProps(),
     ...makeDensityProps(),
@@ -5732,7 +5737,7 @@
               }
             }
           }, {
-            default: () => [slots.default?.() ?? props.text]
+            default: () => [slots.default?.() ?? vue.toDisplayString(props.text)]
           })]), !props.icon && hasAppend && vue.createVNode("span", {
             "key": "append",
             "class": "v-btn__append"
@@ -6740,7 +6745,7 @@
     const isPristine = vue.shallowRef(true);
     const isDirty = vue.computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
     const errorMessages = vue.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 = vue.computed(() => {
       let value = (props.validateOn ?? form.validateOn?.value) || 'input';
@@ -6831,7 +6836,7 @@
       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;
@@ -7892,7 +7897,10 @@
       type: [Boolean, Object],
       default: true
     },
-    text: String,
+    text: {
+      type: [String, Number, Boolean],
+      default: undefined
+    },
     modelValue: {
       type: Boolean,
       default: true
@@ -8061,7 +8069,7 @@
             toggle: group?.toggle,
             value: group?.value.value,
             disabled: props.disabled
-          }) ?? props.text]), hasAppend && vue.createVNode("div", {
+          }) ?? vue.toDisplayString(props.text)]), hasAppend && vue.createVNode("div", {
             "key": "append",
             "class": "v-chip__append"
           }, [!slots.append ? vue.createVNode(vue.Fragment, null, [props.appendIcon && vue.createVNode(VIcon, {
@@ -8940,8 +8948,14 @@
       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(),
@@ -9134,13 +9148,13 @@
           }, {
             default: () => [slots.title?.({
               title: props.title
-            }) ?? props.title]
+            }) ?? vue.toDisplayString(props.title)]
           }), hasSubtitle && vue.createVNode(VListItemSubtitle, {
             "key": "subtitle"
           }, {
             default: () => [slots.subtitle?.({
               subtitle: props.subtitle
-            }) ?? props.subtitle]
+            }) ?? vue.toDisplayString(props.subtitle)]
           }), slots.default?.(slotProps.value)]), hasAppend && vue.createVNode("div", {
             "key": "append",
             "class": "v-list-item__append"
@@ -10741,10 +10755,10 @@
       activeChildren: new Set()
     });
     vue.provide(StackSymbol, stack);
-    const _zIndex = vue.shallowRef(+zIndex.value);
+    const _zIndex = vue.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]);
       }
@@ -10953,6 +10967,7 @@
     emits: {
       'click:outside': e => true,
       'update:modelValue': value => true,
+      keydown: e => true,
       afterEnter: () => true,
       afterLeave: () => true
     },
@@ -11065,6 +11080,9 @@
       });
       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)) {
@@ -11073,6 +11091,10 @@
           } else animateClick();
         }
       }
+      function onKeydownSelf(e) {
+        if (e.key === 'Escape' && !globalTop.value) return;
+        emit('keydown', e);
+      }
       const router = useRouter();
       useToggleScope(() => props.closeOnBack, () => {
         useBackButton(router, next => {
@@ -11135,7 +11157,8 @@
             '--v-overlay-opacity': props.opacity,
             top: convertToUnit(top.value)
           }, props.style],
-          "ref": root
+          "ref": root,
+          "onKeydown": onKeydownSelf
         }, scopeId, attrs), [vue.createVNode(Scrim, vue.mergeProps({
           "color": scrimColor,
           "modelValue": isActive.value && !!props.scrim,
@@ -11806,11 +11829,6 @@
       };
     }
   });
-  // TODO: this is kinda slow, might be better to implicitly inherit props instead
-  function filterFieldProps(attrs) {
-    const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style');
-    return pick(attrs, keys);
-  }
 
   // Types
 
@@ -11918,7 +11936,7 @@
           modelValue: _,
           ...inputProps
         } = VInput.filterProps(props);
-        const fieldProps = filterFieldProps(props);
+        const fieldProps = VField.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": model.value,
@@ -13526,11 +13544,11 @@
         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 vue.createVNode(props.tag, vue.mergeProps({
           "class": ['v-badge', {
@@ -14229,8 +14247,14 @@
     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');
@@ -14280,11 +14304,11 @@
         }, [hasTitle && vue.createVNode(VCardTitle, {
           "key": "title"
         }, {
-          default: () => [slots.title?.() ?? props.title]
+          default: () => [slots.title?.() ?? vue.toDisplayString(props.title)]
         }), hasSubtitle && vue.createVNode(VCardSubtitle, {
           "key": "subtitle"
         }, {
-          default: () => [slots.subtitle?.() ?? props.subtitle]
+          default: () => [slots.subtitle?.() ?? vue.toDisplayString(props.subtitle)]
         }), slots.default?.()]), hasAppend && vue.createVNode("div", {
           "key": "append",
           "class": "v-card-item__append"
@@ -14356,9 +14380,18 @@
       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(),
@@ -14827,7 +14860,7 @@
       vue.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);
@@ -15553,7 +15586,7 @@
   const useSteps = props => {
     const min = vue.computed(() => parseFloat(props.min));
     const max = vue.computed(() => parseFloat(props.max));
-    const step = vue.computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+    const step = vue.computed(() => Number(props.step) > 0 ? parseFloat(props.step) : 0);
     const decimals = vue.computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
     function roundValue(value) {
       value = parseFloat(value);
@@ -18508,8 +18541,8 @@
   }, '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
@@ -19298,7 +19331,7 @@
         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 = vue.computed(() => {
         if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
@@ -19369,7 +19402,7 @@
                 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),
@@ -19418,7 +19451,7 @@
         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;
           vue.nextTick(updateFocus);
         } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
@@ -19751,8 +19784,10 @@
         } 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;
         }
@@ -21515,30 +21550,30 @@
           "class": ['v-date-picker-controls']
         }, [vue.createVNode(VBtn, {
           "class": "v-date-picker-controls__month-btn",
+          "data-testid": "month-btn",
           "disabled": disableMonth.value,
           "text": props.text,
           "variant": "text",
           "rounded": true,
           "onClick": onClickMonth
         }, null), vue.createVNode(VBtn, {
-          "key": "mode-btn",
           "class": "v-date-picker-controls__mode-btn",
+          "data-testid": "year-btn",
           "disabled": disableYear.value,
           "density": "comfortable",
           "icon": props.modeIcon,
           "variant": "text",
           "onClick": onClickYear
-        }, null), vue.createVNode(VSpacer, {
-          "key": "mode-spacer"
-        }, null), vue.createVNode("div", {
-          "key": "month-buttons",
+        }, null), vue.createVNode(VSpacer, null, null), vue.createVNode("div", {
           "class": "v-date-picker-controls__month"
         }, [vue.createVNode(VBtn, {
+          "data-testid": "prev-month",
           "disabled": disablePrev.value,
           "icon": props.prevIcon,
           "variant": "text",
           "onClick": onClickPrev
         }, null), vue.createVNode(VBtn, {
+          "data-testid": "next-month",
           "disabled": disableNext.value,
           "icon": props.nextIcon,
           "variant": "text",
@@ -21885,7 +21920,7 @@
           model.value = [value];
         }
       }
-      return () => vue.createVNode("div", {
+      useRender(() => vue.createVNode("div", {
         "class": "v-date-picker-month"
       }, [props.showWeek && vue.createVNode("div", {
         "key": "weeks",
@@ -21907,6 +21942,13 @@
         }, [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,
@@ -21924,24 +21966,9 @@
               'v-date-picker-month__day--week-start': item.isWeekStart
             }],
             "data-v-date": !item.isDisabled ? item.isoDate : undefined
-          }, [(props.showAdjacentMonths || !item.isAdjacent) && vue.createVNode(VDefaultsProvider, {
-            "defaults": {
-              VBtn: {
-                class: 'v-date-picker-month__day-btn',
-                color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
-                disabled: item.isDisabled,
-                icon: true,
-                ripple: false,
-                text: item.localized,
-                variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
-                onClick: () => onClick(item.date)
-              }
-            }
-          }, {
-            default: () => [slots.day?.(slotProps) ?? vue.createVNode(VBtn, slotProps.props, null)]
-          })]);
+          }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? vue.createVNode(VBtn, slotProps.props, null))]);
         })])]
-      })]);
+      })]));
     }
   });
 
@@ -23079,7 +23106,7 @@
           modelValue: _,
           ...inputProps
         } = VInput.filterProps(props);
-        const fieldProps = filterFieldProps(props);
+        const fieldProps = VField.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": props.multiple ? model.value : model.value[0],
@@ -24698,7 +24725,7 @@
       vue.watch(displayHeight, onScroll);
       vue.watch(() => contentRect.value?.height, onScroll);
       const scale = vue.computed(() => {
-        return 1 - clamp(+props.scale);
+        return 1 - clamp(Number(props.scale));
       });
       let frame = -1;
       function onScroll() {
@@ -25119,7 +25146,7 @@
         themeClasses
       } = provideTheme(props);
       const rating = useProxiedModel(props, 'modelValue');
-      const normalizedValue = vue.computed(() => clamp(parseFloat(rating.value), 0, +props.length));
+      const normalizedValue = vue.computed(() => clamp(parseFloat(rating.value), 0, Number(props.length)));
       const range = vue.computed(() => createRange(Number(props.length), 1));
       const increments = vue.computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
       const hoverIndex = vue.shallowRef(-1);
@@ -25730,7 +25757,7 @@
           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
           };
@@ -27168,10 +27195,10 @@
         }
       }
       const sizerRef = vue.ref();
-      const rows = vue.ref(+props.rows);
+      const rows = vue.ref(Number(props.rows));
       const isPlainOrUnderlined = vue.computed(() => ['plain', 'underlined'].includes(props.variant));
       vue.watchEffect(() => {
-        if (!props.autoGrow) rows.value = +props.rows;
+        if (!props.autoGrow) rows.value = Number(props.rows);
       });
       function calculateInputHeight() {
         if (!props.autoGrow) return;
@@ -27214,7 +27241,7 @@
           modelValue: _,
           ...inputProps
         } = VInput.filterProps(props);
-        const fieldProps = filterFieldProps(props);
+        const fieldProps = VField.filterProps(props);
         return vue.createVNode(VInput, vue.mergeProps({
           "ref": vInputRef,
           "modelValue": model.value,
@@ -28218,8 +28245,8 @@
       prependIcon: '$calendar'
     }),
     ...omit(makeVDatePickerProps({
-      weeksInMonth: 'dynamic',
-      hideHeader: true
+      hideHeader: true,
+      showAdjacentMonths: true
     }), ['active', 'location', 'rounded'])
   }, 'VDateInput');
   const VDateInput = genericComponent()({
@@ -28265,7 +28292,7 @@
           return;
         }
         const target = e.target;
-        model.value = target.value;
+        model.value = target.value === '' ? null : target.value;
       }
       function onClick(e) {
         e.preventDefault();
@@ -28303,6 +28330,7 @@
             "onUpdate:modelValue": $event => menu.value = $event,
             "activator": "parent",
             "min-width": "0",
+            "eager": isFocused.value,
             "location": props.location,
             "closeOnContentClick": false,
             "openOnClick": false
@@ -28542,8 +28570,9 @@
         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(() => {
@@ -28754,7 +28783,7 @@
         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 = vue.shallowRef(null);
       vue.watchEffect(() => {
         if (isFocused.value && !controlsDisabled.value) ; else if (model.value == null) {
@@ -28769,8 +28798,8 @@
           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;
           }
         }
@@ -28894,8 +28923,8 @@
         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;
         }
@@ -29769,14 +29798,7 @@
     }
   });
 
-  // @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,
@@ -29790,15 +29812,15 @@
     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 {
@@ -29821,8 +29843,8 @@
             'v-time-picker-controls__time--with-seconds': props.useSeconds
           }
         }, [vue.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": {
@@ -29831,24 +29853,24 @@
             '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), vue.createVNode("span", {
           "class": ['v-time-picker-controls__time__separator', {
             'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
           }]
         }, [vue.createTextVNode(":")]), vue.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 && vue.createVNode("span", {
           "class": ['v-time-picker-controls__time__separator', {
             'v-time-picker-controls--with-seconds__time__separator': props.useSeconds
@@ -29856,11 +29878,13 @@
           "key": "secondsDivider"
         }, [vue.createTextVNode(":")]), props.useSeconds && vue.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,
@@ -29905,11 +29929,6 @@
   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],
@@ -29922,6 +29941,10 @@
     },
     max: String,
     min: String,
+    viewMode: {
+      type: String,
+      default: 'hour'
+    },
     modelValue: null,
     readonly: Boolean,
     scrollable: Boolean,
@@ -29938,7 +29961,8 @@
       '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 {
@@ -29955,7 +29979,7 @@
       const lazyInputMinute = vue.ref(null);
       const lazyInputSecond = vue.ref(null);
       const period = vue.ref('am');
-      const selecting = vue.ref(SelectingTimes.Hour);
+      const viewMode = useProxiedModel(props, 'viewMode', 'hour');
       const controlsRef = vue.ref(null);
       const clockRef = vue.ref(null);
       const isAllowedHourCb = vue.computed(() => {
@@ -29969,7 +29993,7 @@
         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 = vue.computed(() => {
@@ -29985,8 +30009,8 @@
         }
         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));
@@ -30006,8 +30030,8 @@
         }
         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));
@@ -30073,16 +30097,16 @@
         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;
@@ -30094,10 +30118,10 @@
             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();
@@ -30126,20 +30150,20 @@
             "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: () => vue.createVNode(VTimePickerClock, vue.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
@@ -31052,7 +31076,7 @@
       goTo
     };
   }
-  const version$1 = "3.7.15";
+  const version$1 = "3.7.17";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31305,7 +31329,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.7.15";
+  const version = "3.7.17";
 
   /* eslint-disable local-rules/sort-imports */